彻底理解vue双向数据绑定

原理

1.vue双向数据绑定是通过 数据劫持 结合 发布订阅模式 实现的，数据和视图同步，即数据发生变化，视图跟着变化，视图变化，数据也随之发生改变

2.核心：Object.defineProperty()

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

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

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

简单地说，就是用这个方法来定义一个值。当调用时我们使用了它里面的get方法，当我们给这个属性赋值时，又用到了它里面的set方法；

let obj = {}
Object.defineProperty(obj,'test',{
  get:function(){
        console.log('调用get方法')
   },
 set:function(newVal){
        console.log('调用set方法,新值为：'+newVal)
   }
})
obj.test; // '调用get方法'
obj.test='我们都是打工人' // 调用set方法,新值为：我们都是打工人

简单实现双向数据绑定

双向数据绑定