深度剖析 Vue3 的响应式机制
在上一讲中,介绍了 Composition API 相比于 Option API 的优点,以及 <script setup>
的语法,这些内容能够给我们后面的开发打下了坚实的基础
今天我带你深入了解一下 Vue 3 的响应式机制,相信学完今天的内容,你会对响应式机制有更深地体会;我还会结合代码示例,帮你掌握响应式机制的进阶用法,让我们正式开始学习吧!
什么是响应式
响应式一直都是 Vue 的特色功能之一;与之相比,JavaScript 里面的变量,是没有响应式这个概念的;你在学习 JavaScript 的时候首先被灌输的概念,就是代码是自上而下执行的;
我们看下面的代码,代码在执行后,打印输出的两次 double 的结果也都是 2;即使 我们修改了代码中 count 的值后,double 的值也不会有任何改变
let count = 1
let double = count * 2
count = 2
double 的值是根据 count 的值乘以二计算而得到的,如果现在我们想让 doube 能够跟着 count 的变化而变化,那么我们就需要在每次 count 的值修改后,重新计算 double
比如,在下面的代码,我们先把计算 doube 的逻辑封装成函数,然后在修改完 count 之 后,再执行一遍,你就会得到最新的 double 值
let count = 1
// 计算过程封装成函数
let getDouble = n=>n*2 //箭头函数
let double = getDouble(count)
count = 2
// 重新计算double ,这里我们不能自动执行对double的计算
double = getDouble(count)
实际开发中的计算逻辑会比计算 doube 复杂的多,但是都可以封装成一个函数去执行;下 一步,我们要考虑的是,如何让 double 的值得到自动计算
如果我们能让 getDouble 函数自动执行,也就是如下图所示,我们使用 JavaScript 的某种机制,把 count 包裹一层,每当对 count 进行修改时,就去同步更新 double 的值,那 么就有一种 double 自动跟着 count 的变化而变化的感觉,这就算是响应式的雏形了
响应式原理
响应式原理是什么呢?Vue 中用过三种响应式解决方案,分别是 defineProperty、Proxy 和 value setter我们首先来看 Vue 2 的 defineProperty API
这里我结合一个例子来说明,在下面的代码中,我们定义个一个对象 obj,使用 defineProperty 代理了 count 属性;这样我们就对 obj 对象的 value 属性实现了拦截,读取 count 属性的时候执行 get 函数,修改 count 属性的时候执行 set 函数,并在 set 函数内部重新计算了 double
let getDouble = n=>n*2
let obj = {}
let count = 1
let double
给我一个帽子: 真的特别有用
Koi in Rain: 妈耶,图都没有
强风吹拂str: 这人也是抄的代码,你问了白问
路小雨的雨web: 图裂了
沐沐沐那个高: 大佬请问下小程序怎么加密呢