我们都知道了在 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” 来实现。代码如下
// 原始数据
let data &