当前位置 : 主页 > 网络编程 > JavaScript >

Vue2 Observer实例dep和闭包中dep区别详解

来源:互联网 收集:自由互联 发布时间:2023-02-01
目录 start 1. 依赖收集 2. 通知更新 思考 拓展一 拓展二 手动通知的案例 end start 此前学习 Vue2 源码。对 Vue 源码中两次出现的new Dep(),不清楚它们的区别,写一个文章记录一下。 Vue2 源码
目录
  • start
    • 1. 依赖收集
    • 2. 通知更新
  • 思考
    • 拓展一
    • 拓展二
    • 手动通知的案例
  • end

    start

    此前学习 Vue2 源码。对 Vue 源码中两次出现的new Dep(),不清楚它们的区别,写一个文章记录一下。

    Vue2 源码中有两处通过new Dep生成dep实例:

    1. Observer实例上的dep

    export class Observer {
      value;
      dep;
      vmCount;
      constructor(value) {
        this.value = value;
         /* Observer的实例上有一个 dep 属性 */
        this.dep = new Dep();
        def(value, "__ob__", this);
        if (Array.isArray(value)) {
          if (hasProto) {
            protoAugment(value, arrayMethods);
          } else {
            copyAugment(value, arrayMethods, arrayKeys);
          }
          this.observeArray(value);
        } else {
          this.walk(value);
        }
      }
    

    2. 定义getter,setter中dep

    export function defineReactive(obj, key, val, customSetter, shallown) {
      /* 这个地方也定义了一个dep */
      const dep = new Dep()
      const property = Object.getOwnPropertyDescriptor(obj, key)
      if (property && property.configurable === false) {
        return
      }
      const getter = property && property.get
      const setter = property && property.set
      if ((!getter || setter) && arguments.length === 2) {
        val = obj[key]
      }
      let childOb = !shallow && observe(val)
      Object.defineProperty(obj, key, {
        enumerable,
        configurable,
        get: function reactiveGetter() {
          const 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) {
          /* ... */
        },
      })
    }
    

    为了方便后续介绍,我对两种dep的名称做一下缩减。

    1. Observer实例上的dep => Observer实例上的dep

    2. 定义getter,setter中dep => 闭包中的dep

    既然是 new Dep(),肯定是想要实现某些功能。想要弄懂这两种 dep 的区别,先看看在源码中它们如何工作的。

    1. 依赖收集

    在打包输出的dist文件夹中,找到完整的 Vue.js 源码,全局搜索一下dep.depend() (收集依赖的方法)。

    仅三处做了依赖收集

    // 第 1 种情况
    // 当触发对象属性 getter 的时候,`闭包中的dep`会收集依赖。
    dep.depend()
    // 第 2 种情况
    // 当触发对象属性 getter 的时候,若属性值有更深的子层级。`Observer实例上的dep`会收集依赖。
    childOb.dep.depend()
    // 第 3 种情况
    // 当触发对象属性 getter的时候,数据有更深的子层级且子层级是数组类型。递归遍历数组的每一项,若数组项上存在`Observer的实例`,则对应的`Observer实例上的dep`会收集依赖。
    function dependArray(value) {
      for (var e = void 0, i = 0, l = value.length; i < l; i++) {
        e = value[i]
        e && e.__ob__ && e.__ob__.dep.depend()
        if (Array.isArray(e)) {
          dependArray(e)
        }
      }
    }
    

    情况说明:

    • 当触发对象属性 getter 的时候,闭包中的dep会收集依赖。
    • 当触发对象属性 getter 的时候,若属性值有更深的子层级。Observer实例上的dep会收集依赖。

    当触发对象属性 getter 的时候,数据有更深的子层级且子层级是数组类型。递归遍历数组的每一项,若数组项上存在Observer的实例,则对应的Observer实例上的dep会收集依赖。

    写到这里我有点疑惑,为什么数组的情况,还要额外处理?

    • 因为数组中如果存储的不是对象或数组,对应数组项不会有Observer的实例;
    • 因为数组中如果存储的是对象或数组,对应数组项身上就会有Observer的实例;
    • (核心原因:数组的每一项并不是都会被设置 getter,所以这里需要递归处理一下数组)

    举个例子

    写一个 Html 页面测试

    <!DOCTYPE html>
    <html lang="zh">
      <head>
        <meta charset="UTF-8" />
        <title>lazy_tomato</title>
      </head>
      <body>
        <div id="app">
          <div>{{ c }}</div>
        </div>
        <script src="./vue.js"></script>
        <script>
          new Vue({
            el: '#app',
            data() {
              return {
                b: '你好呀',
                c: [{}],
                d: {},
              }
            },
          })
        </script>
      </body>
    </html>
    

    修改一下Vue源码,加入打印:

    if (Dep.target) {
      dep.depend()
      /* 这里 */
      console.log('111')
      if (childOb) {
        childOb.dep.depend()
        /* 这里 */
        console.log('222')
        if (Array.isArray(value)) {
          dependArray(value)
        }
      }
    }
    function dependArray(value) {
      for (var e = void 0, i = 0, l = value.length; i < l; i++) {
        e = value[i]
        e && e.__ob__ && e.__ob__.dep.depend()
        if (e && e.__ob__ && e.__ob__.dep) {
          /* 这里 */
          console.log('333')
        }
        if (Array.isArray(e)) {
          dependArray(e)
        }
      }
    }
    

    实验结果:

    • 如果页面没有使用 data 中的数据,那么三种情况的 dep.depend() 都不会触发。(因为没有触发 getter)
    • 如果页面仅仅使用到了 b,b 是简单类型的数据,没有子层级, 1会触发, 2、3不触发;
    • 如果页面仅仅使用到了 c,c 是数组类型的数据,而且数组中的项是对象,1、2、3会触发 2不触发;
    • 如果页面仅仅使用到了 d,d 是对象类型的数据,有子层级,1、2会触发, 3不触发;

    结论: 由上面的结果,可以得到结论:

    • 闭包中的dep 关注的是对象属性;
    • Observer实例上的dep,关注的是对象中属性值是对象或者是数组的情况;

    2. 通知更新

    在打包输出的dist文件夹中,找到完整的 Vue.js 源码,全局搜索一下dep.notify()(通知更新的方法)。仅四处做了依赖收集。

    // 第 1 种情况
    // 当触发对象属性 setter 的时候,`闭包中的dep`会通知更新。
    dep.notify()
    // 还有三处,都是使用 `ob.dep.notify()` 的方式会通知更新。
    // 场景分别为:
    // 1. 改写数组的七个方法
    // 2. set 方法
    // 3. del 方法
    

    结论:

    • 闭包中的dep 用于由对象本身修改而触发 setter 函数导致闭包中的 Dep 通知所有的 Watcher 对象。
    • Observer实例上的dep 则是在对象本身增删属性或者数组变化的时候被触发的 Dep。

    思考

    看到上述的内容,可以想到两种 dep 其实是各司其职。

    • 闭包中的 dep 用于管理对象本身修改而触发的依赖。
    • Observer 实例上的 dep 用于对象本身增删属性或者数组变化的时候被触发的依赖。

    它可以用于弥补 Object.defineProperty() 的缺陷。

    • 对象属性 新增或者删除;
    • 数组方法不支持响应式;
    • 通过数组索引修改数据项;

    拓展一

    如果把 Observer 中初始化 dep 的代码注释掉,那么:$set,$del,重写的七种数组方法 都将失效。

    class Observer {
      constructor(value) {
        // this.dep = new Dep(); // 正确的写法
        this.dep = { depend() {}, notify() {} }
        /* ... */
      }
    }
    

    拓展二

    既然源码中的 $set,$del,重写的七种数组方法 ,通知更新,使用的是ob.dep.notify()。 那我们是否可以自己手动通知吗?

    理论是可行的,但是 Vue 源码相对来说,做了更多特殊场景的考虑。所以用官方提供的 API 更可靠。

    手动通知的案例

    <!DOCTYPE html>
    <html lang="zh">
      <head>
        <meta charset="UTF-8" />
        <title>lazy_tomato</title>
      </head>
      <body>
        <div id="app">
          <ul>
            <li v-for="item in list" :key="item">{{item}}</li>
          </ul>
          <h2 @click="foo">点击我通过数组索引添加数据</h2>
          <h2 @click="bar">点击我手动更新通知依赖更新</h2>
        </div>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.7.10/dist/vue.js"></script>
        <script>
          new Vue({
            el: '#app',
            data() {
              return {
                list: [1, 2, 3],
              }
            },
            methods: {
              // 点击我向数组中添加数据
              foo() {
                let length = this.list.length
                this.list[length] = 'tomato' + length // 通过数组索引修改数据,默认是无法通知依赖更新的。
                console.log(this.list)
              },
              // 点击我手动更新通知更新
              bar() {
                this.list.__ob__.dep.notify()
              },
            },
          })
        </script>
      </body>
    </html>
    

    效果图:

    end

    • 本文就 Dep 的初始化和基础的使用场景做了学习。

    再总结一下:

    • 闭包中的dep 用于由对象本身修改而触发 setter 函数导致闭包中的 Dep 通知所有的 Watcher 对象。
    • Observer实例上的dep 则是在对象本身增删属性或者数组变化的时候被触发的 Dep。

    更多关于Vue2 Observer与dep闭包的资料请关注自由互联其它相关文章!

    上一篇:Vuewatch原理源码层深入讲解
    下一篇:没有了
    网友评论