Vue2.x与Vue3.x双向绑定机制深度剖析？

本文共计1003个文字，预计阅读时间需要5分钟。

双向绑定的原理+通过Object.defineProperty()重新定义对象属性的方法来实现，从该属性中取值时会触发get方法，修改该属性时会触发set方法，因此我们只需要将一些需要更复杂的操作的属性定义成响应式属性即可。

双向的绑定的原理

通过Object.defineproperty()重新定义对象属性的set方法、get方法来实现的，从这个属性中取值时会触发get方法，改变这个属性时会触发set方法，所以我们只要将一些需要更新view的方法放在这里面就可以实现data更新view了,而view更新data其实可以通过事件监听实现

当视图上的数据发生改变时， data 中的数据也发生改变当 data 中的数据发生改变时，视图中的数据也发生改变 Object.defineProperty()

Object.defineProperty() 方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回此对象。

语法：Object.defineProperty(obj, prop, descriptor)

参数：

• obj
  要定义属性的对象。
• prop
  要定义或修改的属性的名称或 Symbol 。
• descriptor
  要定义或修改的属性描述符。
  

返回值

被传递给函数的对象。