vue3响应式原理

最新推荐文章于 2025-09-29 10:21:16 发布

原创最新推荐文章于 2025-09-29 10:21:16 发布 · 310 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

本文介绍了如何通过Proxy监控对象变化，创建可响应式函数，并使用Depend类管理依赖。讨论了依赖收集的原理、问题及优化，展示了在实际开发中的应用实例。

一个对象被修改，内部其实首先会收集该对象的所有依赖，通过Proxy检测到变化时再去执行所有依赖

响应式函数的引出：

let nongqing = '弄晴'

// 当nongqing改变时
nongqing = 'nq'

// 执行以下代码
console.log(1)
console.log(2)
...
console.log(99)
...

// 要执行的代码可能有很多，每次写都很麻烦，我们可以把要执行的代码放到函数中管理
// 那怎么判断函数是要进行响应式还是非响应式的呢
// 我们可以定义一个函数，凡是传入这个函数的函数都是需要响应式的函数
let reactiveFn = null
function watchFn(fn) {
    // 函数的参数为一个函数
    reactiveFn = fn
    fn()
    // 防止污染其它的依赖收集
    reactiveFn = null
}

响应式函数的收集：

在实际开发中我们要监听很多的对象变化，每一个对象的每一个属性都会有自己的响应式函数

那这些响应式函数该怎么来存储呢？

首先让我们封装一个类

class Depend {
    constructor(){
        // 存放所有的响应式函数
        this.reactiveFns = []
    }
    // 添加响应式函数
    addDepend(fn){
        this.reactiveFns.push(fn)
    }
    // 执行响应式函数
    notify(){
        this.reactiveFns.forEach(fn => {
            fn()
        })
    }
}

// 封装一个函数用来得到一个对象的一个属性的唯一一个依赖
// 怎么保证依赖的唯一性就是考虑数据管理的问题
const targetMap = new WeakMap()
function getDepend(target,key) {
    let map = targetMap.get(target)
    if(!map) {
        map = new Map()
        targetMap.set(target,map)
    }
    let depend = map.get(key)
    if(!depend) {
        depend = new Depend()
        targetMap.set(key,depend)
    }
    return depend
}

Proxy进行监测：

let obj = {
    name: 'nq',
    age: 18,
    hobby: [ '篮球' ]
}

let objProxy = new Proxy(obj,{
    get(target,key,reciver) {
        const depend = getDepend(target,key)
        // 收集依赖
        depend.addDepend(reactiveFn)
        return Reflect.get(target,key,reciver)
    },
    set(target,key,value,reciver) {
        Reflect.set(target,key,value,reciver)
        const depend = getDepend(target,key)
        depend.notify()
    }
})

以上就是响应式原理实现过程，但会有许多bug，比如函数中有用到两次key，比如name，那么这个函数会被收集两次；我们并不希望将添加reactiveFn放到get中，以为它是属于Dep的行为

需要对depend进行优化处理。具体优化在这里就不展开了大家可以自己思考一下。