一、Vue3简介
二、Vue3带来了什么
1、性能提升
- 打包减少了40%
- 初次渲染快55%，更新快133%
- 内存减少54% ......
2、源码升级
- 使用proxy代替obj.defineproperty实现下响应式
- 重写虚拟DOM的实现和Tree-shaking ......
3、拥抱TS
- Vue3更好地支持TypeScript
4、新的特性
1.Composition API(组合API)
- setup
- ref与reactive
- watch与watchEffect
- provide与inject
...
2.新的内置组件
- Fragment
- Teleport
- Suspense
3.其他改变
- 新的生命周期钩子
- data选项应始终被声明为一个函数
- 移除keyCode作为v-on修饰符 ...
三、创建Vue3.0工程
四、常用Composition API
1. setup
2. setup的两个注意点
-
setup的执行时机 在beforeCreate之前执行一次，this是undefined。
-
setup的参数
-
props:值为对象，包含组件外部传递过来，且组件内部中接收的属性。
-
context：上下文对象
- attrs：值为对象，包含：组件外部传递过来，但没有在props配置中声明的属性，相当于this,$attrs.
- slots：收到的插槽内容.
- emit：分发自定义事件的函数.
-
3. ref函数
-
作用：定义一个响应式数据
-
语法：
const xxx = ref(初始值) //比如: const a = ref('A') const b = ref(null) const c = ref(1)（1）创建一个包含响应式数据的引用对象（reference对象，简称ref对象） 。
（2）JS中操作数据：xxx.value
（3）template中读取数据：不需要.value，直接{{xxx}即可
-
备注：
- 接受的数据可以使：基本类型、也可以是对象类型
- 基本类型的数据：响应式依然是靠object.defineProperty()的get与set完成。
- 对象类型的数据：内部“求助”了vue3的一个新函数--reactive函数
4. reactive函数
-
作用：定义一个对象类型的响应式数据（基本类型不要用它，定义基本类型要用ref函数）
-
语法：
const 代理对象= reactive(源对象)，接收一个对象或数组，返回一个代理对象（Proxy的实例对象，简称proxy对象） //比如 const obj = reactive({ a:1 }) -
reactive的响应式是深层次的。
-
内部基于ES6的Proxy实现，通过代理对象操作源对象内部数据进行操作。
5. reactive对比ref
-
从定义数据角度对比：
- ref用来定义：基本类型数据。
- reactive用来定义：对象（或数组）类型数据。
- 备注：ref也可以用来定义对象（或数据）类型数据，它内部会自动通过reactice转为代理对象。
-
从原理角度对比：
- ref通过object.defineProperty的get与set来实现响应式（数据劫持）。
- reactive通过使用Proxy来实现响应式（数据劫持），并通过Reflect操作原对象内部的数据
-
从使用角度对比：
- ref定义的数据：操作数据需要.value，读取数据时模板不需要.value。
- reactive定义的数据：操作数据和模板数据读取，均不需要.value。
6. vue3中的响应式原理
-
响应式的原理是什么
Vue用过三种响应式解决方案：defineProperty、Proxy、value setter。
结合一个例子来说明这几种的区别：
-
Vue3响应式的实现原理：
-
基于Proxy实现真正的拦截（代理）：拦截对象中任意属性的变化。包括：属性值的读写、添加、删除等。
（Proxy 是针对对象来监听，而不是针对某个具体属性，所以不仅可以代理那些定义时不存在的属性，还可以代理更丰富的数据结构，比如 Map、Set 等，并且我们也能通过 deleteProperty 实现对删除操作的代理.）
-
通过Reflect(反射）：对源代码属性进行操作
-
