面试官：vue3的响应式原理是什么？

han_2023-09-21 13:16

前言

目前vue3已经非常成熟了，像我们公司的的新项目都已经上vue3 + vite了，开发体验真的巨好，开发效率杠杠的，而且vue3的语法写的也非常舒服。

最近听出去参加前端面试的朋友说，最近面试官问vue3问的很多，尤其是vue3相比于vue2的升级点、vue3的响应式、vue3的diff、vue3的性能提升等问题，接下来就带大家一起探索下vue3的核心之一：vue3的响应式原理。

vue2的Object.defineProperty和vue3的Proxy

vue2.0的响应式是通过Object.defineProperty对对象属性重写get和set来实现的，而这个API是有一些缺陷的：

  1. 深度递归，性能消耗大
  2. 无法拦截新增和删除属性
  3. 无法拦截原生数组索引操作

所以Vue3换成了Proxy，它是从对象层面进行拦截的，所以它能解决Object.defineProperty这三个缺陷，但它也有缺点，就是兼容性很差，而且不能被polyfill，正因如此vue3.0不支持IE。

effect函数

effect函数指的是副作用函数，当它执行时，会读取外部状态，从而产生副作用。

js 复制代码 
const obj = { a: 1 }
effect(() => {
  document.body.innerText = obj.a
})

如上所示，effect函数会默认执行传入的回调函数，从而读取obj.a的值，而当obj.a的值发生变化时，我们希望effect会重新执行。

vue3中effect和响应式数据的关系就跟vue2中dep和watcher的关系类似。

响应式数据

vue3中的响应式是由reactivity包来实现的。

我们可以用proxy对数据进行拦截，将其包装为响应式数据，在取值时将当前的数据和effect关联起来，当数据发生变化时，重新执行effect。

js 复制代码 
let activeEffect = null
const data = { a: 1 }

// 这里简单实现下effect
const effect = (fn) => {
    if (fn) {
        fn()
        effect.run = fn
    } else {
        effect.run()
    }
}
const proxyData = new Proxy(data, {
    get(target, key) {
        activeEffect = effect
        return target[key]
    },
    set(target, key, newVal) {
        target[key] = newVal
        activeEffect()
    }
})
effect(() => {
    console.log(proxyData.a)
})

setTimeout(() => {
    proxyData.a = 2
}, 1000)

不过当响应式数据多了之后，这样用一个变量去收集依赖的方式就不行了，vue3采用的是下面的结构来收集依赖。

假设数据为{ a: 1, b: 2 }，最外层用WeakMap来存储，key为原生对象target, value为map，map的key为原生对象的key值，value为一个Set对象，里面用来存储与属性相关联的effect。

最外层选用WeakMap的原因是它是弱引用，不会造成内存泄露，set是为了保证effect唯一。

vue3中实现响应式常用的是reactive方法。

js 复制代码 
import { isObject } from "@vue/shared"
function createReactiveObject(target: object, isReadonly: boolean) {
    if (!isObject(target)) {
        return target
    }
}
// reactive：传入一个普通对象返回一个响应式的代理对象
export function reactive(target: object) {
    return createReactiveObject(target, false)
}
// 后面的方法，shallow表示只代理一层，readonly表示只读，这里先不实现... 
/*
export function shallowReactive(target: object) {
    return createReactiveObject(target, false)
}
export function readonly(target: object) {
    return createReactiveObject(target, true)
}
export function shallowReadonly(target: object) {
    return createReactiveObject(target, true)
}
*/
js 复制代码 
const reactiveMap = new WeakMap(); // 依赖收集容器
const mutableHandlers: ProxyHandler<object> = {
    get(target, key, receiver) {
        // 依赖收集逻辑 TODO
        const res = Reflect.get(target, key, receiver);
        return res;
    },
    set(target, key, value, receiver) {
        // 重新触发effect执行逻辑 TODO
        const result = Reflect.set(target, key, value, receiver);
        return result;
    }
}
function createReactiveObject(target: object, isReadonly: boolean) {
    if (!isObject(target)) {
        return target
    }
    // 同一个对象不需要代理多次
    const exisitingProxy = reactiveMap.get(target);
    if (exisitingProxy) {
        return exisitingProxy;
    }
    // 对对象进行代理
    const proxy = new Proxy(target, mutableHandlers);
    reactiveMap.set(target,proxy)
    return proxy;
}

使用Reflect保证取值时this指向代理对象。

effect原理

js 复制代码 
// 当前正在执行的effect
export let activeEffect = undefined;

class ReactiveEffect {
    active = true;
    deps = []; // 收集effect中使用到的属性
    parent = undefined;
    constructor(public fn) { }
    run() {
        if (!this.active) { // 不是激活状态
            return this.fn();
        }
        try {
            this.parent = activeEffect; // 当前的effect就是他的父亲
            activeEffect = this; // 设置成正在激活的是当前effect
            return this.fn();
        } finally {
            activeEffect = this.parent; // 执行完毕后还原activeEffect
            this.parent = undefined;
        }

    }
}
export function effect(fn, options?) {
    const _effect = new ReactiveEffect(fn); // 创建响应式effect
    _effect.run(); // 让响应式effect默认执行
}

依赖收集

js 复制代码 
get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
        return true;
    }
    const res = Reflect.get(target, key, receiver);
    track(target, 'get', key);  // 依赖收集
    return res;
}
js 复制代码 
const targetMap = new WeakMap(); // 记录依赖关系
export function track(target, type, key) {
    if (activeEffect) {
        let depsMap = targetMap.get(target); // {对象：map}
        if (!depsMap) {
            targetMap.set(target, (depsMap = new Map()))
        }
        let dep = depsMap.get(key);
        if (!dep) {
            depsMap.set(key, (dep = new Set())) // {对象：{ 属性 :[ dep, dep ]}}
        }
        let shouldTrack = !dep.has(activeEffect)
        if (shouldTrack) {
            dep.add(activeEffect);
            activeEffect.deps.push(dep); // 让effect记住dep，这样后续可以用于清理
        }
    }
}

触发更新

js 复制代码 
set(target, key, value, receiver) {
    // 等会赋值的时候可以重新触发effect执行
    let oldValue = target[key]
    const result = Reflect.set(target, key, value, receiver);
    if (oldValue !== value) {
        trigger(target, 'set', key, value, oldValue)
    }
    return result;
}
js 复制代码 
export function trigger(target, type, key?, newValue?, oldValue?) {
    const depsMap = targetMap.get(target); // 获取对应的映射表
    if (!depsMap) {
        return
    }
    const effects = depsMap.get(key);
    effects && effects.forEach(effect => {
        if (effect !== activeEffect) effect.run(); // 防止循环
    })
}

分支切换与cleanup

在effect中可能会有条件判断，所以每次重新执行effect时需要删除依赖并重新收集。

js 复制代码 
const state = reactive({ flag: true, a: 1, b: 2 })
effect(() => { // 副作用函数 (effect执行渲染了页面)
    console.log('render')
    document.body.innerHTML = state.flag ? state.a : state.b
});
setTimeout(() => {
    state.flag = false;
    setTimeout(() => {
        console.log('修改name，原则上不更新')
        state.a = 3
    }, 1000);
}, 1000)
js 复制代码 
// 清理effect
function cleanupEffect(effect) {
    const { deps } = effect;
    for (let i = 0; i < deps.length; i++) {
        deps[i].delete(effect);
    }
    effect.deps.length = 0;
}
class ReactiveEffect {
    active = true;
    deps = [];
    parent = undefined;
    constructor(public fn) { }
    run() {
        try {
            this.parent = activeEffect; 
            activeEffect = this;
            // 新增清空依赖逻辑
+           cleanupEffect(this);
            return this.fn();
        }
    }
}

注意：由于在当前effect时同时执行了set.delete(effect)和set.add(effect)，会导致死循环，所以遍历前可以先拷贝一份

js 复制代码 
export function trigger(target, type, key?, newValue?, oldValue?) {
    const depsMap = targetMap.get(target); // 获取对应的映射表
    if (!depsMap) {
        return
    }
    const effects = depsMap.get(key);
    // 使用new Set拷贝一份
    effects && (new Set(effects)).forEach(effect => {
        if (effect !== activeEffect) effect.run(); // 防止循环
    })
}

停止effect

执行effect会返回ReactiveEffect的实例，而这个实例上会提供一个stop方法，可以清空依赖以及停止依赖收集。

js 复制代码 
export class ReactiveEffect {
    stop(){
        if(this.active){ 
            cleanupEffect(this);
            this.active = false
        }
    }
}
export function effect(fn, options?) {
    const _effect = new ReactiveEffect(fn); 
    _effect.run();

    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner; // 返回runner
}

调度执行

有时候trigger触发时，我们需要自行决定副作用函数执行的时机、次数、及执行方式

js 复制代码 
export function effect(fn, options:any = {}) {
    const _effect = new ReactiveEffect(fn,options.scheduler); // 创建响应式effect
    // if(options){
    //     Object.assign(_effect,options); // 扩展属性
    // }
    _effect.run(); // 让响应式effect默认执行
    const runner = _effect.run.bind(_effect);
    runner.effect = _effect;
    return runner; // 返回runner
}

export function trigger(target, type, key?, newValue?, oldValue?) {
    const depsMap = targetMap.get(target);
    if (!depsMap) {
        return
    }
    let effects = depsMap.get(key);
    if (effects) {
        effects = new Set(effects);
        for (const effect of effects) {
            if (effect !== activeEffect) { 
                // 如果有调度函数则执行调度函数
                if(effect.scheduler){ 
                    effect.scheduler()
                }else{
                    effect.run(); 
                }
            }
        }
    }
}

深度代理

vue3的响应式是懒递归的，只代理一层，当取出的值是对象时，再去代理下一层。

js 复制代码 
 get(target, key, receiver) {
    if (key === ReactiveFlags.IS_REACTIVE) {
        return true;
    }
    const res = Reflect.get(target, key, receiver);
    track(target, 'get', key);

    // 代理下一层
    if(isObject(res)){
        return reactive(res);
    }
    return res;
}

小结

vue3的reactive响应式解决了vue2响应式的无法拦截新增和删除属性、无法拦截原生数组索引以及性能的问题，同时vue3采用了monorepo的方式进行源码管理，将响应式拆成了一个单独的reactivity包，可以单独使用，如果你想的话，可以将其用来React项目中，让两大框架同时存在同一个项目中，当然这并不推荐哦~

相关推荐
轻口味3 分钟前
【每日学点鸿蒙知识】AVCodec、SmartPerf工具、web组件加载、监听键盘的显示隐藏、Asset Store Kit
前端·华为·harmonyos
alikami5 分钟前
【若依】用 post 请求传 json 格式的数据下载文件
前端·javascript·json
wakangda37 分钟前
React Native 集成原生Android功能
javascript·react native·react.js
吃杠碰小鸡40 分钟前
lodash常用函数
前端·javascript
emoji1111111 小时前
前端对页面数据进行缓存
开发语言·前端·javascript
泰伦闲鱼1 小时前
nestjs：GET REQUEST 缓存问题
服务器·前端·缓存·node.js·nestjs
m0_748250031 小时前
Web 第一次作业 初探html 使用VSCode工具开发
前端·html
一个处女座的程序猿O(∩_∩)O1 小时前
vue3 如何使用 mounted
前端·javascript·vue.js
m0_748235951 小时前
web复习（三）
前端
User_undefined1 小时前
uniapp Native.js原生arr插件服务发送广播到uniapp页面中
android·javascript·uni-app
热门推荐
01【一文读懂】NTN（非地面网络）技术介绍02优化手机性能，解决卡顿问题：关闭这3个微信开关，释放内存空间03玄机平台应急响应—webshell查杀04Cube-Studio：开源大模型全链路一站式中台05基于大语言模型（LLM）的合成数据生成、策展和评估的综述06(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明07组基轨迹建模 GBTM的介绍与实现（Stata 或 R）08HCIA-datacom数通题库和录播视频资料09Docker 夺命连环 15 问10RAG 实践- Ollama+RagFlow 部署本地知识库