vue2.0和vue3.0中数据绑定的原理解析

vue2.0中数据绑定通过ES5中object.defineProperty实现。

let obj = {
  name:'1111'
}
let newObj = JSON.parse(JSON.stringify(obj))
Object.defineProperty(obj,"name",{
  get(){
    return newObj.name;
  },
  set(newVal){
    newObj.name = newVal
    observer()
  }
})
observer()
function observer() {
  $('#text').html(newObj.name)
  $('.input').val(newObj.name)
}
// v-module 简单原理
$('.input').change(function(e){
  obj.name = e.target.value
})

defineProperty需要对原始数据进行深克隆，而且需要分别给对象中的每一个属性进行监听。 譬如在定义data的时候只有obj:{}，但是使用过程中去修改obj.name是不生效的。
所以在vue3.0中，修改为es6中的proxy。

let obj  ={}
obj = new Proxy(obj,{
  // target 当前目标 prop设置属性 val设置属性的值
  get(target,prop){
    return target[prop]
  },
  set(target,prop,val){
    target[prop] = val   
    observer()     
  }
})
observer()
function observer() {
  $('#text').html(obj.name)
  $('.input').val(obj.name)
}
$('.input').change(function(e){
  obj.name = e.target.value
})

所以mvvm框架的的理解就是双向的数据绑定，视图（表单）的变化会更新数据，数据的变化更新视图。mvc框架只是数据的更新控制视图的变化。 所以呢，vue的原理我们就可以清晰的知道了。首先observer触发数据的变化，watch监听到数据的变化，告知complier，然后更新视图。