vue3

1. 生命周期

1.1 生命周期图示

1.2 Options API 和 Composition API 之间的映射

Vue2 Options-based API	Vue Composition API
beforeCreate	setup()
created	setup()
beforeMount	onBeforeMount
mounted	onMounted
beforeUpdate	onBeforeUpdate
updated	onUpdated
beforeDestroy	onBeforeUnmount
destroyed	onUnmounted
errorCaptured	onErrorCaptured

2. 响应式原理

2.1 实现原理：

• 实现Proxy（代理）：拦截对象中任意属性的变化，包括：属性值的读写、属性的添加、属性的删除等。

• 通过Reflect（反射）：对源对象的属性进行操作。

• MDN 文档中描述的 Proxy 与 Reflect：

  • Proxy：Proxy-JavaScript | MDN
  • Reflect：Reflect- JavaScript | MDN

js
 体验AI代码助手
 代码解读
复制代码
new Proxy(data, {
    // 拦截读取属性值
    get(target, prop) {
        return Reflect.get(target, prop);
    },
    // 拦截设置属性值或添加新属性
    set(target, prop, value) {
        return Reflect.set(target, prop, value);
    },
    // 拦截删除属性
    deleteProperty(target, prop) {
        return Reflect.deleteProperty(target, prop)
    }
})

Proxy.name = "Ada";

3. setup

1. 理解：Vue3.0 中一个新的配置项，值为一个函数。

2. setup 是所有 composition API（组合API）“表演的舞台”。

3. 组件中所用到的：数据、方法等，均要配置在setup中。

4. setup函数的两种返回值：

   1. 若返回一个对象，则对象中的属性、方法，在模板中均可以直接使用。
   2. 若返回一个渲染函数，则可以自定义渲染内容。

5. setup几个注意点：

   1. 执行的时机：

      • 在beforeCreate之前执行一次，this是undefined。

   2. setup的参数：

      • props:值为对象，包含：组件外部传递过来，且组件内部声明接收了的属性。

      • context: 上下文对象。

        • attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs.
        • slots：收到的插槽内容，相当于this.$slots.
        • emit：分发自定义事件的函数，相当于this.$emit.

   3. 尽量不要与vue2.x配置混用：

      • Vue2.x配置（data, methods, computed...）中可以访问到setup中的属性、方法。
      • 但在setup中不能访问Vue2.x配置（data, methods, computed...）.
      • 如果有重名，setup优先。

   4. setup不能是一个async函数，因为返回值不再是return的对象，而是promise，模板看不到return对象中的属性。（后期也可以返回一个Promise实例，但需要Suspense和异步组件的配合）