23个css动画效果，持续更新中...

我们都知道了在 Vue2 中的响应式是通过 Object.defineProperty 重写 get set，进行数据劫持来实现的。那么 Vue3 中是如何实现的呢？

要了解响应式，我们先认识一下副作用函数。 本文参考自霍春阳大大的《Vue.js 设计与实现》

副作用函数

副作用函数指的就是会产生副作用的函数（听君一席话，胜读一席话 🤣），代码如下

let a = 1

function effect(x) {a++return a + x
}
effect(1) // 2
console.log(a) // 2 

effect 函数中执行自身逻辑中，修改了全局变量 a，对其他使用的产生了影响，那么这就是一个副作用，这种会影响除了自身局部变量以外的变量的函数，我们称之为 “副作用函数”

响应式数据

理解了副作用函数，那么我看来看一下什么是响应式。假设在一个副作用函数读取一个变量的属性并赋值，代码如下

let obj = {text: 'hello effect'
}

function effect() {document.body.innerHTML = obj.text
}
effect() 

effect 函数执行后，页面会显示 hello effect，同时当我们再次修改 obj.text = "hello world" ，effect 再次执行，页面同步刷新成为 hello world，那么我们就实现了数据的响应式。 接下来让我们来尝试实现以下最基本的响应式吧。

no bb，show me the code! 🤐

响应式数据的基本实现

由上面可知，只要我们再 obj.text 每次变化的时候，重新执行 effect 不就好了么？是的就这么简单。 核心就是代理对象 “Proxy” 来实现。代码如下

// 原始数据
l