简单谈谈vue双向数据绑定原理

vue双向数据绑定是通过数据劫持和发布者-订阅者模式的方式来进行实现的

数据劫持：就是我们访问或者是设置对象的属性的时候，会触发Object.defineProperty()函数来进行劫持（拦截）的，返回（get）设置（set)的两个对象的方法来操纵我们对于数据的反应

发布者-订阅者模式：就是对象间的一种1对多的依赖关系 当这个对象的状态改变的时候，所有依赖于这个对象的所有内容都会得到通知

let obj={};
    let name='';
    Object.defineProperty(obj,"name",{
        get:()=>{
            console.log('你读取了对象');
            
            return `唱跳rap${name}`
        },
        set:(value)=>{
            name=value;
            console.log('你设置了对象');
           
        }
    })
    obj.name="坤坤"; // 输出 你设置了对象
    console.log(obj.name);  // 输出  你读取了对象 唱跳rap坤坤
     console.log(obj)

不难看出，当我们设置obj这个对象的属性时会触发set这个函数，当我们访问时会触发get这个函数
当我们打印obj这个对象时，结果如下

我们再打印一下vue中的数据

export default {
  name: 'App',
  data(){
    return {
      msg:{
        name:"vue数据"
      }
    }
  },
  mounted(){
    console.log(this.msg)
  }
}

对比一下，是不是跟我们在上面打印的数据长得有点类似，说明vue确实是通过这种方法来进行数据劫持的。