Vue.js的双向绑定原理

Vue的双向绑定

vue双向绑定是其最重要的核心亮点，其原理也很简单，这里做个简单总结

• vue2的双向绑定是利用的Object.defineProperty
• vue3的双向绑定是利用的
  ES6Porxy中的defineProperty(target, propKey, propDesc
  其作用类似于Object.defineProperty

下面写一下两种原理的简单代码

• 用于直观展示双向绑定的视图层（view） html代码

• vue2的双向绑定

  let obj={
  message:"12"
  }
  Object.defineProperty(obj,"message",{
  get:function(){
  return this._message
  },
  set:function(newValue){
  this._message=newValue
  document.getElementById("output").innerHTML=newValue
  }

  })

  document.getElementById("input").addEventListener('input',(event)=>{
  obj.message=event.target.value
  })

代码主要对对象的set过程进行劫持，将其与view层绑定

• vue3的双向绑定

  let obj={
  message:"12"
  }
  const newObj=new Proxy(obj,{
  get:function(target,propKey,rev){
  return Reflect.get(target,propKey)
  },
  set:function(target,propKey,value){
  Reflect.set(target,propKey,value)
  document.getElementById("output").innerHTML=value
  }
  })

  document.getElementById("input").addEventListener('input',(event)=>{
  newObj.message=event.target.value
  })

• 效果
  !