vue2 数据响应式原理——数据劫持(对象篇)
前言
本系列查阅顺序:
vue2 数据响应式原理——数据劫持(初始篇)
vue2 数据响应式原理——数据劫持(对象篇)
vue2 数据响应式原理——数据劫持(数组篇)
vue2 数据响应式原理——依赖收集和发布订阅
通过上一篇想必你已经对Object.defineProperty()
有了一定的理解,这一篇我们就在前面的基础上探讨如何通过Object.defineProperty()
来对对象,甚至是嵌套的对象进行数据劫持,以便我们能够侦听到对象的变化。
对Object.defineProperty()
了解之后我们就可以对其进行封装,形成一个可以侦听到对象变化的函数:
数据劫持(对象篇)
defineReactive
这里的defineReactive
用来对 Object.defineProperty
进行封装。从函数名字可以看出,其作用是定义一个响应式数据。也就是在这个函数中进行变化追踪,封装后只需要传入data
、key
和val
就行了。
封装后之后,每当从data
的key
中读取数据时,get
函数会被触发;每当data
中的key
改变时,set
函数会被触发
这里再看开头尤大大的那句话在 getter 中收集依赖,在 setter 中触发依赖。
你应该就能明白我们之后需要在defineReactive
的get
函数中收集依赖,在set
函数中触发依赖,也就是在访问对象的属性时收集依赖,在更新对象的属性时触发依赖,什么是依赖,我们之后再说。
这里演示一下 defineReactive
的用法:
这样obj
的a
和b
就都变成响应式的了
这里有个有意思的点就是在将
obj
中的属性使用defineReactive
变成响应式数据前后打印出的obj
不同,但当它们展开后又是相等的:
但是这里你可能会发现defineReactive
函数好像只能将对象的第一层数据变成响应式的,如果obj
是多层嵌套:
这时我们该怎么使用defineReactive
函数呢?
上面我们通过defineReactive(obj, "a", 6);
处理了a
属性,这个6
是a
属性的值,但如果obj
嵌套了,a
就不是一个确定的值了,而是一个对象,此时defineReactive
的第三个参数怎么传呢?
这样?
这样显然是不对的,正确的做法是不传!只需稍微更改一下defineReactive
函数:
这个时候:
只显示试图访问a
属性,但我们具体在访问n
属性,这样数据响应就不够准确了。
为什么呢?
因为defineReactive
第二个参数我们传的是a
,即侦听的是a
而不是n
,怎么办呢?
这样?defineReactive(obj, "a.b.m.n")
,这显然扯淡!
为了递归侦测对象的全部属性,即将对象的每一层属性全都变成响应式数据我们需要引入Observer
类和observe
函数(注意observer
函数不带r
)
我们之后要用到
es6
的import
导入语法,需要对现在的文件做一下处理:index.html
在引入index.js
文件时加上type="module"
<script type="module" src="index.js"></script>
之后
vscode
安装Live Server
,之后在index.html
右键选择Open with Live Server
打开即可
先提前看一下我们之后进行操作后的文件目录:
介绍一下各文件:
index.html
入口文件,测试所用index.js
js 主文件,测试所用observe.js
observe
函数,整个响应式系统的入口,判断指定的对象身上是否含有代表响应式数据的‘__ob__
’属性,如果没有则new Observer()
Observer.js
Observer
类,将new
出的自己这个实例绑定到指定对象的__ob__
属性上,并遍历对象的子属性调用defineReactive
defineReactive.js
侦测对象内的指定属性,利用Object.defineProperty
将其变成响应式数据,并调用observe
函数形成递归调用。utils.js
工具函数,含有def
函数:将指定值绑定到指定对象的指定属性上,并可自定义enumerable
配置
我们先从index.js
文件开始:
可以看到这里我们引入了observe.js
,使用observe(obj)
将obj
这个对象的各个层级的所有属性都变成了响应式的,所以这里这个observe()
函数的作用就很明确了,那么我们就继续深入,看一下这个observe()
函数是怎么做到将一个对象的各个层级的属性变成响应式的。
observe.js
observe
函数首先在传入的值为object
对象的情况下,判断了它有没有__ob__
这个属性,如果有就赋值给ob
,如果没有就new
了一个Observer
实例赋值给了ob
,之后observe
函数将ob
返回了。
看到这里我们并没有发现observe
函数是怎样将一个对象的各个层级的属性变成响应式的,但是它new
了一个Observer
实例,那么我们就能大胆猜测:
将一个对象的各个层级的属性变成响应式的活是
Observer
实例干的而这个
__ob__
应该就是Observer
实例!。
那__ob__
有什么用呢?用处就是可以进行一个响应式数据的判断依据,如果一个数据已经含有__ob__
这个属性,那么就不再new Observer(value)
,避免重复侦测value
的变化。
至于
observe
最后为什么要返回一个ob
不用纠结!不用纠结!不用纠结!这个之后在研究数组的响应式处理和收集依赖时可能会用到,现在这里其实不返回也行。
顺着我们的猜测继续深入去看,但是在看Observer.js
之前我们先看utils.js
:
utils.js
utils.js
就是一个简单的工具文件,它里面导出了一个def
函数,def
函数通过defineProperty
将传入的value
赋值给传入的obj
的key
属性,并且可以根据传入的enumerable
来配置key
属性是否可以被枚举。
Observer.js
Observer
是一个类,它干了什么呢?
它调用了utils.js
中的def
函数,并传入了value, "__ob__", this, false
,作用就是利用def
函数将this
绑定到了value
的__ob__
属性上,并且__ob__
这个属性不可被枚举。
绑定的这个this
指的就是当前的Observer
这个实例,通过打印我们可以看到:
这就印证了我们在看observe.js
时的猜测:《这个__ob__
应该就是Observer
实例 》
并且前面我们也猜测《将一个对象的各个层级的属性变成响应式的活是Observer
实例干的》
当我们看到Observer
类的walk
调用了defineReactive
,我们的猜测就全部印证了,因为我们知道defineReactive
的作用不就是将一个数据变成响应式的吗?
看到这你应该有了大致的理解,让我们继续看下去:
observe
在new Observer
类的时候会调用walk
函数,walk
函数会遍历传来的value
的key
,然后调用defineReactive
将value
的这些key
变成响应式的,这就是为什么前面我们通过observe(obj)
能够将obj
变成响应式的了。
但是从这里我们还不能发现它们能够将value
这个对象参数的所有层的属性都变成响应式的,因为walk
通过for in
遍历value
的属性只能遍历一层,那么怎么办呢?
到这里我们就剩一个我们最熟悉的defineReactive.js
还没有看,会不会是它里面做了一些什么,能够让咱们分析的这个过程对一个对象的子属性也执行一遍,即递归调用,那么我们就赶紧来看一下这个defineReactive.js
:
defineReactive.js
当我们看到defineReactive.js
中又引入了observe
,我们就应该恍然大悟了,除了入口文件index.js
,我们第一个分析的就是observe
,分析到最后defineReactive
又调用了observe
,这不就是一个循环调用吗!
看到defineReactive
执行了:
当然现在也可以不让
observe(val)
的返回值赋给childOb
,我们这里赋值给childOb
是为了之后能用到,这里不用纠结为什么。
defineReactive
在对指定对象的key
进行响应式处理的时候先执行了observe(val)
,这个val
就是这个key
对应得的值,即data[key]
,如果这个值也是一个对象,那么observe
就会对其再次进行处理,以此类推,循环调用,就将一个对象所有层的属性转换成了响应式数据。
并且在set
方法中,当设置了一个新值newVal
后,对这个新值也执行一下observe
,使新的数据也变成响应式数据。
总结一下
整个过程:
observe(obj)
判断到obj
不含__ob__
这个属性,知道了obj
还不是响应式数据,所以在observe
函数内执行了new Observer(obj)
(因为obj
是传入的参数,所以之后的value
都是指这个obj
)new Observer(obj)
将new
出的这个Observer
实例通过def函数
绑定到了obj
的__ob__
不可枚举属性上,然后调用walk(obj)
遍历obj
上含有的第一层属性,逐个执行defineReactive(obj, k)
(k
指遍历到的属性)defineReactive
将obj
上的这些属性(上一步遍历到的所有k
)变成了响应式数据,defineReactive(obj, k
)内又执行了observe(obj['k'])
使用observe
对k
属性的值
再次执行这整个过程,形成一个循环的过程。
自此obj
本身和它的所有对象属性上都有了这个__ob__
属性,后续如果observe(obj)
再执行就不会再new Observer(obj)
了。
说到这里后细心的你可能会发现,上面我们所做的操作在对数组的响应式处理中会有一些问题,比如:
可以看到,我们使用push
方法向obj.c
数组中添加了一个元素 9,但是通过控制台我们发现,我们以上的处理并没有侦测到数组的改变,所以我们接下来就来看怎么对数组进行处理:vue2 数据响应式原理之数据劫持(数组篇)
版权声明: 本文为 InfoQ 作者【海底烧烤店ai】的原创文章。
原文链接:【http://xie.infoq.cn/article/cd3da8f84655f7e80d06e76e2】。文章转载请联系作者。
评论