我们都知道了在 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! 🤐

本文探讨Vue3中的响应式实现,通过副作用函数、响应式数据及Proxy来实现基本响应式。同时介绍如何在uni-app中实现人脸识别功能,结合计算属性computed进行深入讨论,并提供前端大厂面试题资料。
最低0.47元/天 解锁文章
1万+





