vue2中双向绑定原理

一、概念

Vue是采用数据劫持结合发布/订阅模式的方式，

通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。

二、代码展示

例一

let obj = {};
Object.defineProperty(obj,'name',{
  get:function(){
    console.log("get")
    return val;
  },
  set:function(newVal){
    console.log("set")
  }
})

obj.name = "张学友"
let val = obj.name

例二

let obj = {}
let demo =  document.querySelector("#demo")
let inp =  document.querySelector("#inp")

Object.defineProperty(obj,"name",{
    get:function(){
        return val
    },
    set:function(newVal){
        inp.value = newVal
        demo.innerHTML = newVal
    }
})

inp.addEventListener("input",function(e){
   obj.name = e.target.value
})