vue3.

一.对比vue2

1.性能提升

打包大小减少41%
初次渲染快55%,更新渲染快113%
内存减少54%
…

2.源码升级

使用Proxy代替defineProperty实现响应式
…

3.拥抱TS

vue3可以更好的支持TS

4.新的特性

1.Composition API(组合API)
2.新的内置组件
3其他(新的声明周期,data等)
…

二.创建Vue3.0

官网创建方式
1.使用vue-cli创建

vue -V //查看@vue/cli版本,确保@vue/cli版本在4.5.0以上

2.使用Vite创建

三.初始化工程结构分析

main.js
createApp(app):

App.vue

四.Composition API (组合式API)

1.setup:

Vue3中新的配置项,值为一个函数
组件中的的数据,计算属性,方法等等,均要配置在setup中
setup函数的两种返回值:1.若返回一个对象,则对象中的属性,方法没在模板中均可直接使用2.若返回一个渲染函数,则可以自定义渲染内容

注意:

在vue3中,依旧兼容vue2的写法

vue2可以读取vue3中的配置,但是vue3无法读取vue2中的配置

当vue2和vue3冲突时,以vue3为主

setup不能是一个async函数(在setup中处理异步请求时),因为返回值不是return的对象,而是promise,模板读取不到对象中的属性

2.ref函数

定义响应式数据

3.reactive函数

定义对象类型的响应式数据

4.vue3响应式原理

通过Proxy(代理):拦截对象中任意属性的变化,包括:属性值的读写,属性的添加,属性的删除
通过Reflect(反射):对被代理对象的属性进行操作

5.reactive和ref对比
从定义数据对比:

ref用来定义:基本数据类型
reactive用来定义:对象(或数组)类型数据
ref也可以定义对象(或数组)类型数据,它内部通过reactive转化为代理对象

从原理角度对比:

ref通过object.defineProperty()的get与set来实现响应式(数据劫持)
reactive通过使用Proxy来实现响应式(数据劫持),并通过Reflect操作源对象内部数据

从使用角度对比:

ref定义的数据:操作数据需要.value,读取数据时模板中直接读取不需要.value
reactive定义数据:操作数据与读取数据:均不需要,value

6.setup补充

setup执行时机:在beforeCreate之前执行一次,且this指向为undefined

setup传参

props:值为对象,包含外部传递过来,切组件内部声明接收了的属性

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

7.计算属性与监视

computed:计算属性:

watch监听:

情况一:监视ref定义的一个响应式数据

情况二:监视ref定义多个响应式数据

情况三:监视reactive所定义的响应式数据全部属性 (注意:1无法正确获取oldvalue2.强制开启了深度监听,切deep: false失效)

情况四:监听reactive所定义的一个响应式数据中的某个属性(函数)

情况五:监听reactive所定义的一个响应式数据中的多个属性

六:特殊情况(监视的是reactive定义的对象的某个属性,所以deep配置有效,或者说监听的响应式数据为对象时,deep才生效)

watchEffect函数:

不用指明监视哪个属性,监视的回调中用到哪个属性,就监视哪个属性
类似于computed:
但是computed注重的是计算出来的值(回调函数的返回值),所以必须写返回值
而watchEffect更注重的是过程(回调函数的函数体),所以不需要写返回值

8.生命周期

vue2:

vue3:

Vue3.0中可以继续使用vue2的生命周期狗子,但有两个更名:
beforeDestroy 更名为 beforeUnmount
destroyed 更名为 unmounted

setup () 内部调用生命周期钩子:



9.自定义hook函数

本质是一个函数,把setup函数中使用的Composition API进行了封装
类似于vue2中的mixin
优势:复用代码,让setup中的逻辑更清楚易懂

10.toRef

创建一个ref对象,其val值指向另一个对象中的某个属性
将响应式对象中的某个属性单独提供给外部使用

11.shallowReactive和shallowRef

shallowReactive

只考虑第一层当响应式,多层响应式不考虑
若有一个对象数据,结构比较深,但变化的只是最外层的属性时使用

shallowRef:

shallowRef:不会处理对象类型的响应式 ref:可以处理对象类型化的响应式
若有一个对象数据,后续功能不会修改该对象中的属性,而是生成新的对象来替换

12.readonly和shallowReadonly

readonly:将响应式数据变成只读(深只读)
shallowReadonly:将响应式数据变成只读(浅只读)
应用场景:不希望数据被修改

readonly:

shallowReadonly: