vue双向数据绑定原理

vue中通过v-model进行一个双向数据绑定。

双向数据绑定的原理是什么？

Vue内部通过Object.defineProperty方法属性拦截的方式，把data对象里每个数据的读写转化成getter/setter，当数据变化时通知视图更新。

就是data数据发生变化时，视图也跟着变化。视图的数据变化时（表单数据），data里的数据也发生变化。

什么是Object.defineProperty

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

Object.defineProperty(obj, prop, desc)

obj 需要定义属性的当前对象
prop 当前需要定义的属性名
desc 存取描述符
存取描述符 --是由一对 getter、setter 函数功能来描述的属性.
get：一个给属性提供getter的方法，如果没有getter则为undefined。该方法返回值被用作属性值。默认为undefined。
set：一个给属性提供setter的方法，如果没有setter则为undefined。该方法将接受唯一参数，并将该参数的新值分配给该属性。默认值为undefined。

let Person = {}
let temp = null
Object.defineProperty(Person, 'name', {
  get: function () {
    return temp
  },
  set: function (val) {
    temp = val
  }
})
    Person.name="222"   console.log(Person.name)