这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天

（没有更完）

watcher实现

vue2响应式原理

vue2.x版本响应式基于ES5的Object.defineProperty实现

vue3响应式原理

可以理解为 基于发布-订阅模式分析vue3.0响应式原理

vue3.0中响应式的用法：reactive包装数据，effect定义数据变化后的回调。

• reactive()为目标对象创建一个Proxy对象(代理对象)。

function reactive(target) {
    return new Proxy(target, {
        get(target, key, receiver) {
            return Reflect.get(target, key, receiver);
        },
        set(target, key, value, receiver) {
            return Reflect.set(target, key, value, receiver);
        }
    })
}

上一篇文章已经提到这些了 [ ](MVVM框架介绍--简易mvvm框架（3） ｜ 青训营笔记 - 掘金 (juejin.cn))

响应式数据的发布和订阅

副作用函数，响应式数据--vue.js设计与实现里面的讲述

• 副作用函数指的是会产生副作用的函数
• 响应式数据的基本实现：

当副作用函数 effect 执行时，会触发字段 obj.text 的读取操 作；

当修改 obj.text 的值时，会触发字段 obj.text 的设置操作。

拦截一个对象属性的读取和 设置操作。在 ES2015 之前，只能通过 Object.defineProperty 函 数实现，这也是 Vue.js 2 所采用的方式。在 ES2015+ 中，我们可以使 用代理对象 Proxy 来实现，这也是 Vue.js 3 所采用的方式。

完善的响应系统

• 工作流程

当读取操作发生时，将副作用函数收集到“桶”中； 当设置操作发生时，从“桶”中取出副作用函数并执行。

优化： 如果副作用函数是一个匿名函数，也能够被正确地收集到 “桶”中。需要提供一个用来注册副作用函数的机制

// 用一个全局变量存储被注册的副作用函数
 let activeEffect
 // effect 函数用于注册副作用函数
 function effect(fn) {
 // 当调用 effect 注册副作用函数时，将副作用函数 fn 赋值给activeEffect
 activeEffect = fn
 // 执行副作用函数
 fn()
}

问题 没有在副作用函数与被 操作的目标字段之间建立明确的联系