Vue Object.defineProperty及ProxyVue实现双向数据绑定

双向数据绑定无非就是，视图 => 数据，数据 => 视图的更新过程

以下的方案中的实现思路：

• 定义一个Vue的构造函数并初始化这个函数(myVue.prototype._init)
• 实现数据层的更新：数据劫持，定义一个 obverse 函数重写data的set和get(myVue.prototype._obsever)
• 实现视图层的更新：订阅者模式，定义个 Watcher 函数实现对DOM的更新(Watcher)
• 将数据和视图层进行绑定，解析指令v-bind、v-model、v-click(myVue.prototype._compile)
• 创建Vue实例(new myVue)
  

1.object.defineproperty方式实现双向数据绑定

 

 
 
  #app{
  text-align: center;
 }


 

 
  
  

 


 

2.Proxy 实现双向数据绑定

 

 
 
  #app{
  text-align: center;
 }


 

 
  
  

 


 

3.将上面代码改成class的写法

 

 
 
  #app{
  text-align: center;
 }


 

 
  
  

 


 

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。