5. 依赖收集

2022-06-26 22:34:13 作者：互联网

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, 从而实现双向记录

标签：依赖,target,收集,渲染,dep,vm,watcher,Dep
来源： https://www.cnblogs.com/littlelittleship/p/16414560.html