亲宝软件园·资讯

展开

Vue对象的深层劫持详细讲解

BraveWangDev 人气:0

一,前言

上篇,主要介绍了在 Vue 的数据初始化流程中,对象属性的单层劫持是如何实现的

回顾一下,主要涉及以下几个核心点:

本篇,继续对 data 数据进行初始化操作,对象属性的深层劫持

二,对象属性的深层观测问题

1,抛出问题

当前版本的代码逻辑:

如果,data 对象中的属性,还是一个对象(称为obj)

那么,这个对象(obj)中的属性是不会被观测的(目前所说的观测还仅仅停留在数据劫持阶段)

就是说,当前仅实现了对 data 对象中属性的单层劫持,嵌套对象不会被深层劫持

2,测试问题

<script>
  let vm = new Vue({
    el: '#app',
    data() {
      // data函数返回的对象中,obj属性为一个对象,它的属性不会被观测
      return { message: 'Hello Vue', obj: { key: "val" } }
    }
  });
</script>

3,查看结果

new Vue 时,传如的 options 选项中的 data 函数,

data 函数中,属性 obj 的值依然是一个对象 { key: “val” }

对象 { key: “val” } 中的 key,此时没有被添加 get 和 set 方法,说明 key 没有被劫持

三,对象属性深层观测的实现

1,实现思路

TODO:需要先回顾一下,对象属性单层观测的流程

有了 data 对象单层观测的经验,对象属性 obj 深层劫持就简单多了

当对象属性 obj 即将被 Object.defineProperty 劫持时,

再对 obj 对象做一次“对象的单层劫持”

更深层的对象属性劫持,就是在递归执行“对象的单层劫持”

即:当属性为对象类型时(非 null)

继续进行 observe 观测,observe 的递归就实现了对象属性的深层劫持

2,代码逻辑

function defineReactive(obj, key, value) {
  observe(value);// 递归实现深层观测
  Object.defineProperty(obj, key, {
    get() {
      return value;
    },
    set(newValue) {
      if (newValue === value) return
      value = newValue;
    }
  })
}

TODO:需要突出递归的逻辑

四,data 相关优化

TODO:结合对象属性观测的特点,介绍 data 的相关优化

五,结尾

本篇主要实现了 Vue 数据初始化流程中,对象属性的深层劫持,核心思路就是递归;

下一篇,数组的劫持

加载全部内容

相关教程
猜你喜欢
用户评论