vue2/3数据双向绑定的区别(一)

1,653 阅读2分钟

vue2中的双向绑定原理:

利用Object.defineProperty()方法,对对象中的属性的读写进行监听,使用到的是Object.defineProperty的get()、set()函数,在属性读写时进行附加操作。

不同类型数据的双向绑定:

1. 基本数据类型
  • 处理vue中的data对象,使其变成响应式

也就是用Object.defineProperty的get()、set()函数进行拦截操作

observe()方法:对data对象进行一个响应式的处理 原理:遍历data对象。如果data对象为null或不是对象,不处理或报错,否则调用defineReactive()方法。

defineReactive()方法:为每一个属性添加get()、set()的方法 对其中的每一个属性设置get()、set()的方法,如果调用get()方法返回其值,调用set()方法就改变值,并触发视图的更新。

image.png

image.png

2.对象

对对象内部的属性再添加一层监听,直到是一个基本数据类型为止:

image.png

以及在设置对象值的时候也要添加一层监听:

image.png

对象双向绑定的缺陷:

当对象新增属性时:如果不是一开始就被vue编译,不会被添加上get,set,以至于不会被监听修改。
当对象删除属性时:Object.defineProperty中的get,set函数监听不到变化,同样不会刷新

对象双向绑定的缺陷,vue2的解决方案

当对象删除属性时:Vue.delete() this.$delete是Vue.delete的别名。Vue.delete(object, key)
当对象新增属性时:Vue.set() this.$set 是Vue.set的别名。Vue.set(object, key, value)

3.数组
  • 使用数组索引去修改数组也不是响应式的修改数组 Vue.set(vm.items, indexOfItem, newValue)
  • 使用数组方法不会更新视图,为原来的数组方法添加视图更新的功能
实现的原理:

让数组的原型变成自定义的原型,不仅仅让它去做原来数组调用方法会做的事情,还增加让它更新视图的功能。

实现的步骤:

1.创建一个数组对象,赋值为数组的原型,就能获得所有的原型上的数组的方法

2.使用Object.create(它的原型)方法创建一个数组对象,原型为第一步创建的数组对象(感觉这一步不设置原型对象好像也没关系???)

3.重写7大能改变原数组的方法,实际做法是:为第2步创建的新数组,构建数组的方法,方法体做的事情1.调用原生的数组方法(就是调用第1步数组对象上的方法),2.更新视图

4.在observer里面判断如果是数组就把它的原型变成我们第2步自己定义的

image.png