vue2与vue3的响应式比较

vue2的响应式

• 核心:
  • 对象: 通过defineProperty对对象的已有属性值的读取和修改进行劫持(监视/拦截)
  • 数组: 通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持

Object.defineProperty(data, 'count', {
    get () {}, 
    set () {}
})

• 问题
  • 对象直接新添加的属性或删除已有属性, 界面不会自动更新
  • 直接通过下标替换元素或更新length, 界面不会自动更新 arr[1] = {}

比如这边通过一个按钮对一个对象增加属性,但是会发现直接this.person.sex='女' 会发现页面并没有渲染出来该属性,但是对象中已经有了,这是因为vue2中监测不到这样的数据改变

解决方法：使用this.$set(this.person.'属性名',属性值) 进行添加对象的属性

再查看删除功能,会发现对象属性已经删除了,但是页面渲染中的对象属性并没有消失

因为通过这种方式去删除属性definedpropotype是监测不到的

 

因为definedpropotype是使用get和set进行数据的劫持和监视,但是当进行数据的添加和删除时,就监测不到了

 

 解决办法：

使用this.$delete(this.person.'属性名‘) 进行删除属性

 

 

而且直接使用数组下标对数组数组数据进行修改也不会触发页面的更新

 解决方法还是使用vue.set或者this.$set

 或者调用数组的变更方法 splice进行修改

vue2中的响应式实现代码：

 

 

除了会发现这样对对象进行响应式的话,一是由于只能监视到set和get方法,而如果进行delete 或者添加属性,都监视不到,而且这样写的话,每一个属性都会有get和set 

vue3的响应式

我们先试一下vue2中的问题

添加属性,删除属性,使用数组的索引值,进行修改数据

会发现vue3中不会存在这些问题

vue3中对引用类型是使用proxy代理进行响应式的实现的

这样get的set的好处会发现,不需要在每个对象属性中都去加get和set,它会根据你对什么数据进行了读取或者修改进行使用get和set方法

 删除

 

而且会发现set中不仅实现响应数据的修改而且也能响应添加数据

 

 

但是我们这通过写直接这些实现了数据的增删改查,而其实vue3其实不是这样实现的

使用了reflect