vue双向绑定的原理及实现双向绑定MVVM源码分析

• Vue双向数据绑定的原理：
  可以将对象的属性绑定到UI，具体的说，我们有一个对象，该对象有一个name属性，当我们给这个对象name属性赋新值的时候，新值在UI上也会得到更新。同样的道理，当我们有一个输入框或者textarea的时候，我们输入一个新值的时候，也会在该对象的name属性得到更新。
• 数据劫持实现双向数据绑定：
  vue.js 则是采用数据劫持结合发布者-订阅者模式，通过Object.defineProperty()来劫持各个属性的setter，getter。在数据变动时发布消息给订阅者，触发响应的监听回调。详情见Object.defineProperty()
  -通过 Object.defineProperty 来实现一个简单的数据双向绑定。通过该方法来监听属性的变化。
  实现的效果简单如下：页面上有一个input输入框和div显示框，当在input输入框输入值的时候，div也会显示对应的值，当我打开控制台改变 obj.name="输入任意值"的时候，按回车键运行下，input输入框的值也会跟着变，可以简单的理解为 模型-> 视图的 改变，以及 视图 -> 模型的改变。如下代码：

 
  
    
    
    
    
    
    
    
    
  
  
    
使用Object.defineProperty实现简单的双向数据绑定
    
    

    
  

参考https://www.cnblogs.com/tugenhua0707/p/7589602.html