5. 依赖收集
vue中的依赖收集
vue中使用的是观察者模式
watcher是观察者, dep是被观察者
上一节已经可以做到手动渲染, 调用vm._update(vm._render())方法
将渲染的逻辑封装到watcher中, 给每一个属性添加上dep属性,
让dep属性去记录当前watcher
在值发生变化的时候, 找到对应属性dep里面的watcher, 重新渲染
大致实现流程
封装渲染方法, 将渲染方法放在watcher里面
在lifecycle.js中, 做如下修改
export function mountComponent(vm, el) {
// 将挂载的元素也放到实例上
vm.$el = el
// 将渲染方法封装到updateComponent里面
const updateComponent = () => {
vm._update(vm._render())
}
// 生成一个渲染watcher的实例, true表示渲染watcher
new Watcher(vm, updateComponent, true)
}
新建文件 observe/watcher.js文件
let id = 0
export class Watcher {
constructor(vm, fn, options) {
this.id = id ++
this.vm = vm
this.deps = []
this.depsId = new Set()
// 是否是渲染watcher
this.renderWatcher = options
// 重新渲染的方法
this.getter = fn
// 渲染watcher需要立即执行一次
this.get()
}
get() {
this.getter()
}
}
// 注意, 渲染watcher在渲染的时候要立即执行一次, 需要执行一次getter
// id用来表示唯一watcher
新建observe/dep.js文件
let id = 0
export class Dep{
constructor() {
this.id = id ++
// 用来存储watcher
this.subs = []
}
}
Dep.target = null
// id用来表示唯一
// 添加了一个静态变量 Dep.target, 用于记录当前的watcher
// 这种实现方式有点恶心
在实现响应式的时候添加dep属性
在observe/index.js中
export function defineReactive(target, key, value) {
// 再次劫持
observe(value)
// 给每个属性都加上dep, 这个空间不会被销毁, 是个闭包
let dep = new Dep()
...
}
// 添加dep属性, dep不会被销毁
如何记录当前的watcher ? 重新整理一个流程
获取template模板, 转化成ast语法树, 组装成render函数, 执行组件的挂载,即vm.___update(vm.___render)方法, 后来这个方法被封装到了watcher中, 直接new Watcher(), 上面的方法作为参数传入, 然后执行这个方法, 执行过程中, 遇到模板字符串 {{name}} 会去执行get方法, 因此 我们可以在执行方法之前, 在watcher中将Dep.target 指向this, 也就是当前的watcher, 执行完毕之后置为null, 就能在Object.defineProperty的get里面拿到当前的watcher, 进行下一步操作
在watcher中, 第一次渲染之前让Dep.target = this, 结束后置空
get() {
// 开始渲染时, 让静态属性Dep.target指向当前的watcher, 那么在取值的时候, 就能在对应的属性中记住当前的watcher
Dep.target = this
this.getter()
// 渲染完毕之后清空
Dep.target = null
}
在获取属性值的时候, 让当前的dep和watcher互相记住
// observe/index
export function defineReactive(target, key, value) {
// 再次劫持
observe(value)
// 给每个属性都加上dep, 这个空间不会被销毁, 是个闭包
let dep = new Dep()
// 再次劫持
Object.defineProperty(target, key, {
get() {
// 执行vm._render的时候会在这里取值, 此时Dep.target指向当前渲染watcher
if(Dep.target) {
// 如果有Dep.target, 执行dep上面的depend方法
dep.depend()
}
return value
},
set(newValue) {
if(value === newValue) return
observe(newValue)
value = newValue
// 设置新值的时候通知更新
dep.notify()
}
})
}
最终修改后的代码整体
新建 4.watcher.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>依赖收集</title>
</head>
<body>
<div id="app">
<div class="bx1" style="backgroundColor: red;fontWeight: bolder">{{name}} hello {{name}}</div>
<li>{{age}}</li>
</div>
<script src="vue.js"></script>
<script>
// 依赖收集的核心是: 将渲染逻辑添加到watcher中, 给每个属性添加一个dep, 用来记住当前的watcher
// 当属性发生变化时, 找到对应属性dep里面的watcher, 重新执行
const vm = new Vue({
el: "#app",
data() {
return {
name: 'ywj',
age: 18
}
}
})
setTimeout(() => {
vm.name = 'jerry'
vm.age = 13
}, 2000)
</script>
</body>
</html>
observe/index.js
let id = 0
export class Dep{
constructor() {
this.id = id ++
// 用来存储watcher
this.subs = []
}
depend() {
// 让dep记住当前的watcher, 但是这样做会重复, 并且不能实现多对多
// this.subs.push(Dep.target)
// 先让当前的watcher记住dep, 然后在addDep里面去重,
Dep.target.addDep(this)
}
addSub(watcher) {
// 这里就不用再次去重了
this.subs.push(watcher)
}
notify() {
// subs里面的每一个watcher 分别更新
this.subs.forEach(watcher => watcher.update())
}
}
Dep.target = null
observe/watcher.js
import { Dep } from "./dep"
let id = 0
export class Watcher {
constructor(vm, fn, options) {
this.id = id ++
this.vm = vm
this.deps = []
this.depsId = new Set()
// 是否时渲染watcher
this.renderWatcher = options
// 重新渲染的方法
this.getter = fn
// 渲染watcher需要立即执行一次
this.get()
}
get() {
// 开始渲染时, 让静态属性Dep.target指向当前的watcher, 那么在取值的时候, 就能在对应的属性中记住当前的watcher
Dep.target = this
this.getter()
// 渲染完毕之后清空
Dep.target = null
}
// watcher里面添加dep, 去重
addDep(dep) {
if(!this.depsId.has(dep.id)) {
this.deps.push(dep)
this.depsId.add(dep.id)
// 去重之后, 让当前的dep,去记住当前的watcher
dep.addSub(this)
}
}
update() {
// 更新, 需要重新收集依赖
this.get()
}
}
最后说一下dep和watcher相互记住的流程
watcher的get方法里面, 当渲染执行前将Dep.target置为当前watcher, 渲染完成后置空.
在取值的时候, 就是get方法的时候, 如果有Dep.target(当前的watcher), 就执行当前dep里面的depend方法, 该方法内容为, 让当前的watcher记住该dep并且去重, 去重之后然这个dep记录当前的watcher, 从而实现双向记录