5. 依赖收集

2022-06-26 22:34:13 阅读：153 来源： 互联网

标签：依赖 target 收集渲染 dep vm watcher Dep

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

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9