Vue双向绑定源码分析

骑猪看日落 2023-06-10 13:29 22阅读 0赞

### 一、前言 ###

一直想研究一下vue的源码，但苦于没有耐力坚持下去，所以就一直拖着，今天就来研究一下吧，事情总是要做的，闲话少叙，我们都知道，vue双向绑定的核心是通过Object.defineProperty()来劫持数据，再结合设计模式发布/定义来设计的，那么什么叫双向绑定呢，双向绑定意味着视图发生改变，数据也发生改变，数据发生改变，视图也会发生改变，双向绑定的，如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]

### 二、Object.defineProperty() ###

Object.defineProperty()是什么意思呢？，来个例子。

<!DOCTYPE html>
    <html lang="en">
    
    <head>
      <meta charset="UTF-8">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <meta http-equiv="X-UA-Compatible" content="ie=edge">
      <title>Object.defineProperty</title>
    </head>
    
    <body>
      <script>
        let obj = { 
        }
        let book = ""
    
        Object.defineProperty(obj, "book", { 
          get: function () { 
            return book
          },
          set: function (newVal) { 
            book = newVal + "啦啦"
          }
        })
        obj.book = 'Vue.js实战'
        console.log(obj.book)
        console.log(obj)
      </script>
    </body>
    
    </html>

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]  
从上面可以看到多了下面几个属性 get，set ，而我们去看一下vue里面也具备同样的get，set属性，不妨可以去试一下，这里不过多阐述。

### 三、Observe源码分析 ###

// 引入vue文件 new一个Vue对象
      var vm = new Vue({ 
        el: '#app',
        // beforeCreate() { 
        // console.log(1)
        // },
        created() { 
          console.log(this.msg)
        },
        data: { 
          msg: 'hello vue'
        }
      })

Observer.prototype.walk = function walk(obj) { 
      // obj：{ msg: 'hello vue'} 
        var keys = Object.keys(obj); // 获取obj的键 这里是"msg"
        for (var i = 0; i < keys.length; i++) { //循环
          defineReactive$$1(obj, keys[i]);
        }
      };

具体流程如下图所示：  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]

上面的数据劫持get set 讲到Watcher的时候再详细讲，到此 Observe已经讲完了

### 四、Watcher源码分析 ###

function Watcher(vm, exp, cb) { 
        this.cb = cb;
        this.vm = vm;
        this.exp = exp;
        // 此处为了触发属性的getter，从而在dep添加自己
        this.value = this.get(); 
    }

调用get

Watcher.prototype.get = function get() { 
        pushTarget(this); // 推入栈中
        var value;
        var vm = this.vm;
        try { 
          value = this.getter.call(vm, vm); // 这句关键 会触发前面的数据拦截里面的get
        } catch (e) { 
          if (this.user) { 
            handleError(e, vm, ("getter for watcher \"" + (this.expression) + "\""));
          } else { 
            throw e
          }
        } finally { 
          // "touch" every property so they are all tracked as
          // dependencies for deep watching
          if (this.deep) { 
            traverse(value);
          }
          popTarget();
          this.cleanupDeps();
        }
        return value
      };

Object.defineProperty(obj, key, { 
          enumerable: true,
          configurable: true,
          get: function reactiveGetter() { 
            var value = getter ? getter.call(obj) : val;
            if (Dep.target) {  
              dep.depend(); // 判断是否存在订阅者 不存在 添加订阅者
              if (childOb) { 
                childOb.dep.depend();
                if (Array.isArray(value)) { 
                  dependArray(value);
                }
              }
            }
            return value
          },
          set: function reactiveSetter(newVal) { 
            var value = getter ? getter.call(obj) : val;
            /* eslint-disable no-self-compare */
            if (newVal === value || (newVal !== newVal && value !== value)) {  // 如果值未发生改变 则返回
              return
            }
            /* eslint-enable no-self-compare */
            if (customSetter) { 
              customSetter();
            }
            // #7981: for accessor properties without setter
            if (getter && !setter) {  return }
            if (setter) { 
              setter.call(obj, newVal);
            } else { 
              val = newVal;
            }
            childOb = !shallow && observe(newVal);
            dep.notify();
          }
        });

Dep.prototype.depend = function depend() { 
        if (Dep.target) { 
          Dep.target.addDep(this);
        }
      };
    
      Watcher.prototype.addDep = function addDep(dep) { 
        var 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); // 往subs数组添加数据 添加订阅者
      };

这篇[文章][Link 1]确实不错，可以参考一下。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70]: /images/20230531/259fd03b39b145d5be9d380435fc994e.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 1]: /images/20230531/f1e188fa22704bd78ad1ff378ebc732b.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3l1YW5xaTMxMzE_size_16_color_FFFFFF_t_70 2]: /images/20230531/8a20851487374088a06cd7db47ed6d27.png
[Link 1]: https://segmentfault.com/a/1190000006599500