李晨的博客

Vue 3 学习笔记

Vue 3 的文档已经有中文版，内容很详细，也有 Vue 2 迁移 Vue 3 的指南。因此这里只记录下自己用到的部分新特性和自己的一些理解。

Vue 3 数据响应式

Vue 2 的数据响应式底层实现是 Object.defineProperty(),对于数组则是拦截了数组的七个方法。这种方式存在的问题是对于对象没有办法检测到属性的添加或删除。对于基于数组索引的变化也不能检测到。

Vue 3 的数据响应式基于 ES6 的 Proxy 实现的，和 Mobx 6 相同。解决了上面提到的问题

• Proxy 可以实现直接监听对象而非属性，所以对象的属性新增和删除也可以被监听

• Proxy 可以直接监听数组的变化。因此数组直接修改下标对应的内容或长度也可以被监听

  Read more »

完善和部署项目

编写文档首页

程序员不懂设计，直接从一些设计网站上获取素材。比如 dribbble

准备工作和完成组件

准备

全局安装 create-vite-app

1

yarn global add create-vite-app@1.18.0

创建项目

1

cva color-ui

引入 vue-router

1

yarn add vue-router@4.0.0-beta3

Flex 布局的默认高度问题

将元素设置为 display:flex 后，子元素如果没有设置高度或设为 auto，将占满整个容器的高度。可以通过设置 align-items 属性来解决。

DOM 事件、事件委托和默认动作

事件捕获和冒泡

Vue 函数式组件

最近学习过程中用到了 Vue 的函数式组件，发现网上相关的资料很少。而在 Vue 3 中函数式组件也不再被推荐使用，这里简单记录下使用函数式组件的一些场景和用法。

Vue 函数式组件是没有状态(没有响应式数据)，也没有实例(没有 this 上下文)。

Event Loop

JavaScript 是单线程的，在 NodeJS 和 浏览器中都引入了消息队列和事件循环系统来解决单线程带来的一些问题。

如果没有 Event Loop 会发生什么？

如果没有 Event Loop ，因为 JavaScript 是单线程的，所有任务都在一个线程上完成。一旦遇到大量任务或者一个耗时的任务，浏览器网页将出现”假死”，因为 JavaScript 不能停下来去响应用户的行为 。

Electron 基础

配置项目

如何在 CRA 中引入 Electron

根据环境信息加载本地或者 devServer URL

使用 electron-is-dev 来进行判断

上面的这幅图描述了 Vue 组件响应式更新的过程，每个组件实例对应一个 watcher 实例，它会在组件渲染的过程中把”接触”过的数据 property 记录为依赖。之后当依赖项的 setter 触发时，会通知 watcher 从而使它关联的组件重新渲染。

需要注意的是 Vue 不会去收集 data 函数中没有在 template 中依赖的数据,当这些数据变化时，组件也不会重新渲染。这里是一个例子。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

<template>
  <div class="hello">
    <button @click="change">change</button>
  </div>
</template>
<script>
export default {
  name: "HelloWorld",
  props: {
    msg: String,
  },
  data() {
    return {
      a: 1,
    };
  },
  updated() {
    console.log("更新了");
  },
  methods: {
    change() {
      this.a += 1;
      console.log(this.a);
    },
  },
};
</script>

在点击 change 按钮后， this.a 会加 1，但是 updated 钩子函数不会执行。因为在 template 中没有用到 this.a