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 可以直接粘贴运行。

先用正则把{
{}}这里面的数据找到。以属性为“data-element-binding”绑定到DOM树上

根据DOM树上“data-element-binding”，找到当前的DOM。

根据DOM里的参数与data里的属性，通过defineProperty绑定。

更新data数据，然后DOM自动更新了。

    ideal    
        
            
     {
   {msg}}
        
     {
   {msg}}
        
     {
   {msg}}
        
     {
   {what}}
        
     {
   {hey}}
    
    
    复制代码

个人博客： www.liangtongzhuo.com