vue 源码分析 双向数据binding的方法

我们的目的是：更新数据->自动更新ui
1.首要检测数据有没有变化
2.更新ui

根据 vue 的思想, es5 提供我们一个方法，为一个对象某一个属性设置监听方法。

    var data = {
          a: 5;
    }
    
     //我们设置了 data对象的a属性的监听
      Object.defineProperty(data, a, { 
          set: function(newVal) {
                  console.log(newVal,'为data.a设置了新值');
          },
          get: function() {
               console.log('获取data.a');
                return variable; 
          }
       )

    data.a = 10;//会调用set方法
    //打印：10为data.a设置了新值。
    var c = data.a;//会调用gat方法
    //打印：获取data.a

• 吐槽一下，这个Swift语法一模一样啊，
  但是 Swift 除了 set 和 gat 方法以外还有 willSet 即将改变和 didSet 改变后的方法。

• 这是 vue 官方的源码地址
  https://github.com/vuejs/vue/blob/871ed9126639c9128c18bb2f19e6afd42c0c5ad9/explorations%2Fgetset.html

我把源码稍微修改了（基本没动），添加了一些注释。 Chrome 可以直接粘贴运行。

1. 先用正则把{{}}这里面的数据找到。 以属性为“data-element-binding”绑定到DOM树上
2. 根据DOM树上“data-element-binding”，找到当前的DOM。
3. 根据DOM里的参数与data里的属性，通过defineProperty绑定。
4. 更新data数据，然后DOM自动更新了。

    
    



    

        
{{msg}}
        
{{msg}}
        
{{msg}}
        
{{what}}
        
{{hey}}
    
    

个人博客： www.liangtongzhuo.com