vue3和vue2.x的区别

211 阅读1分钟

声明周期的变化

image.png

整体来看 变化不大,使用setup代替了之前的beforeCreate和created,其他生命周期名字有些变化,功能都是没有变化的

使用proxy代替defineProperty

vue无法实现对数组对象的深层监听? 因为组件每次渲染都是将data里的数据通过defineProperty进行响应式或者双向绑定上,之前没有后加的属性是不会被绑定上的,也就不会触发更新渲染

object.defineProperty()语法

image.png

Proxy语法

image.png

对比以上两种语法,defineProperty只能响应首次渲染时候的属性,Proxy需要的是整体,不需要关心里面有什么属性。

组件基本结构分析

image.png image.png image.png

生命周期的使用

image.png 执行结果

image.png

组合API的使用

setup setup 替代了以前的beforeCreate和created,类似于初始化的功能 父组件

image.png

子组件

image.png

打印结果如下

image.png 如果想要获取更多当前组件的相关属性,可以从组合API里引用getCurrentInstance

image.png

image.png

ref、toRef、toRefs

image.png