Vue3 学习整理

Vue3 优点：

1. 性能的提升：

1. 打包和渲染更快；

2. 内存更小

2. 源码升级：

1. 使用Proxy代替defineProperty实现响应式；

2. 重写虚拟DOM的实现和tree-Shaking。

3. 更好的支持TypeScript；

4. 新的特性。

Composition API (组合式API)：

1. setup配置

2. ref与active

3. watch和watchEffect

4. provide与inject

新的内置组件：

1. Fragment

2. Teleport

3. Suspense

其他改变：

1. 新的生命周期钩子

2. data选项始终被声明为一个函数

3. 移除keyCode支持v-on的修饰符

vite的优势：

1. 开发环境中，vite无需打包，可快速的冷启动

2. 轻量快速的热重载（HMR）

3. 真正的按需编译，不需要等待整个应用编译完成

setup：

1. setup是vue3的一个新配置项，值是一个函数；

2. 执行时间：在beforeCreate之前，即组件创建之前；

3. 在setup函数中 this 还不是组件实例，this 此时是 undefined;

4. 在模板中需要使用的数据和函数，需要在setup 返回；

5. setup 的参数：

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

2. context：上下文对象

1. attrs: 值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this.$attrs。

2. slots: 收到的插槽内容，相当于this.$slots。

3. emit：分发自定义事件的函数，相当于this.$emit。

6. setup是所有组合式API表演的舞台，是组合式API的起点；

7. 组件中所用到的：数据（vue2.0中的data）、方法（vue.2.0中的methods）、生命周期等，均需要写在setup中，且需要被返回后才可以在模板中使用。

8. setup有两种返回值：

1. 返回一个对象，则对象中的属性、方法，在模板中可以直接使用；

2. 返回一个渲染函数，则可以自定义渲染的内容。

9. 尽量不要vue2和vue3混用：

1. vue3可以向下兼容vue2的data、methods，vue2的data、methods可以通过this获取setup中的数据和方法。

2. setup里面不可以读取data、methods中数据、方法。

3. 如果vue2和vue3有重名，setup优先。

10. setup 不能是一个async函数。如果使用了async返回的就不是一个对象，而是promise。模板中也就不能使用。但是可以和Suspense、异步组件搭配使用async。

ref函数：

1. 作用：定义响应式数据（一般用于基本类型）。

2. 语法：

import { ref } from 'vue'
export default {
    setup () {
        // const 定义的对象可以修改里面的属性
        const xxx = ref(initValue)
        return {
            xxx
        }
    }
}

· 创建一个包含响应式数据的引用对象（reference对象）；

· js操作数据：xxx.value；

· 模板中读取数据不需要 .value。

c . 备注：