Vue源码一行行分析（二）双向绑定原理

今天药忘吃喽~ 2023-06-12 04:25 8阅读 0赞

### 一、前言 ###

今天来一步步实现Vue双向绑定，先引入一张的图片，此图片[来源][Link 1]，他这篇文章写得挺好的，大家可以去看看，而我这篇文章的意义在源码的分析以及自身的一些理解，不足之处，请指正，谢谢。可能就光看图不是很理解，那么从源码的角度来解析图，在回过头来看这张图，那么你会理解很多，活不多说，开始吧。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

#### 二、源码分析 ####

接我自己上篇[Vue源码一行行分析（一）整体分析][Vue]，没看的先看我的第一篇吧，可以得知，在initState方法中进行数据监控绑定。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]

因为data中的值放置在\_data中，所以你要获得msg的值你只能通过this.\_data.msg获得，那我岂不是获取每一个值都要this.\_data.xxx，对于程序员来说这是难以接受的，我们只想要什么取什么 this.xxx才是我想要的，怎么简单怎么来，所以才有proxy方法，使用Object.defineProperty  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]

接下来到最后的observe方法了

var Dep = function Dep () { 
        this.id = uid++; 
        this.subs = []; // 定义一个订阅者列表
      };

Observer.prototype.walk = function walk (obj) { 
        var keys = Object.keys(obj);  // 获得data的键 开始循环监听
        for (var i = 0; i < keys.length; i++) { 
          defineReactive$$1(obj, keys[i]);
        }
      };

下面三段代码是取值的时候 添加订阅者

Dep.prototype.depend = function depend () { 
        if (Dep.target) {  // 这里Dep.target就是Watcher 当有新的Watcher的时候，就放入到Dep.target中
          Dep.target.addDep(this);
        }
      };

Watcher.prototype.addDep = function addDep (dep) { 
        var id = dep.id; // 通过Dep的id来判断订阅者中是否已经有相同的订阅者了，没有则添加，有则不添加
        if (!this.newDepIds.has(id)) { 
          this.newDepIds.add(id);
          this.newDeps.push(dep);
          if (!this.depIds.has(id)) { 
            dep.addSub(this);
          }
        }
      };

Dep.prototype.addSub = function addSub (sub) { 
        this.subs.push(sub); // 添加到Dep的subs数组列表中
      };

下面的代码段是设置值得时候通知Watcher发生更新

Dep.prototype.notify = function notify () { 
        // stabilize the subscriber list first
        var subs = this.subs.slice();
        if (!config.async) { 
          // subs aren't sorted in scheduler if not running async
          // we need to sort them now to make sure they fire in correct
          // order
          subs.sort(function (a, b) {  return a.id - b.id; });
        }
        for (var i = 0, l = subs.length; i < l; i++) { 
          subs[i].update();  
        }
      };

Watcher.prototype.update = function update () { 
        /* istanbul ignore else */
        if (this.lazy) { 
          this.dirty = true;
        } else if (this.sync) { 
          this.run();
        } else { 
          queueWatcher(this);
        }
      };

Watcher.prototype.run = function run () { 
        if (this.active) { 
          var value = this.get();
          if (
            value !== this.value ||
            // Deep watchers and watchers on Object/Arrays should fire even
            // when the value is the same, because the value may
            // have mutated.
            isObject(value) ||
            this.deep
          ) { 
            // set new value
            var oldValue = this.value;
            this.value = value;
            if (this.user) { 
              try { 
                this.cb.call(this.vm, value, oldValue);
              } catch (e) { 
                handleError(e, this.vm, ("callback for watcher \"" + (this.expression) + "\""));
              }
            } else { 
              this.cb.call(this.vm, value, oldValue);
            }
          }
        }
      };

相信你现在已经有点晕了，也有可能是我讲的不是很清楚，因为封装很多方法，总跳，所以就很繁琐，你不从整体看的话，跳的方法过多，就有点难了，我现在画个流程图捋捋思路。  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]  
通过上面 其实，双向绑定原理主要分四个模块，分别为Observer(观察者)，Dep(消息管理中心)，Watcher(监听者), Compile(编译者)，首先使用Observer 采用Object.defineProperty进行数据劫持，在使用发布订阅设计模式，进行监听，当取值的时候，通知消息管理中心添加监听者，当设置值得时候，Watcher通知改变，Compile重新解析编译，更新相应视图，而将vue的模板比如什么v-model ，\{ \{\}\}转换成html，就要通过Compile编译解析，所以这就是双向绑定的基本原理，这里没有过多的讲述Compile，因为现在还在学习，Compile是通过模板转换成AST虚拟树，在转换成VNode，最后解析成html的过程，还有很多难点，后续再更新吧

[Link 1]: https://www.cnblogs.com/libin-1/p/6893712.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230531/0dde0fb46e624ab681cac2218286c5ad.png
[Vue]: https://blog.csdn.net/yuanqi3131/article/details/102719034
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230531/b539a6fe7cae42adb815872329f3987c.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20230531/016a77d9b1eb41ecb79d979f41822ce2.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 3]: /images/20230531/e033047765344ddb8d7d7a738ba81640.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 4]: /images/20230531/8c7c46792a964cb0853003c5a9639ca2.png