《Vue.js设计与实现》第四章响应系统的作用与实现-CSDN博客

本文链接：https://blog.csdn.net/m0_67810366/article/details/142831407

一、响应式数据与副作用函数

什么是响应式数据？
什么是副作用函数？
副作用函数在vue中起什么作用？
vue中的副作用函数有哪些？

以上是读本章节我的疑问。

什么是副作用函数，什么是响应式数据书中是这样说的，如下：

副作用函数指的是会产生副作用的函数，如下面的代码所示：

function effect() {
  document.body.innerText = 'hello vue3'
}

当 effect 函数执行时，它会设置 body 的文本内容，但除了 effect 函数之外的任何函数都可以读取或设置 body 的文本内容。也就是说，effect 函数的执行会直接或间接影响其他函数的执行，这时我们说 effect 函数产生了副作用。副作用很容易产生，例如一个函数修改了全局变量，这其实也是一个副作用，如下面的代码所示：

// 全局变量
let val = 1

function effect() {
  val = 2 // 修改全局变量，产生副作用
}

什么是响应式数据呢，结合副作用函数来说：

理解了什么是副作用函数，再来说说什么是响应式数据。假设在一个副作用函数中读取了某个对象的属性：

const obj = { text: 'hello world' }
function effect() {
  // effect 函数的执行会读取 obj.text
  document.body.innerText = obj.text
}

如上面的代码所示，副作用函数 effect 会设置 body 元素的 innerText 属性，其值为obj.text，当 obj.text 的值发生变化时，我们希望副作用函数 effect 会重新执行：

obj.text = 'hello vue3' // 修改 obj.text 的值，同时希望副作用函数会重新执行

这句代码修改了字段 obj.text 的值，我们希望当值变化后，副作用函数自动重新执行，如果能实现这个目标，那么对象 obj 就是响应式数据。但很明显，以上面的代码来看，我们还做不到这一点，因为 obj 是一个普通对象，当我们修改它的值时，除了值本身发生变化之外，不会有任何其他反应。

副作用函数在vue中起什么作用呢：

当某个状态改变时，副作用函数可以自动执行，使得视图可以随之更新。例如响应式数据改变页面对应的dom更新。在组件加载时，可以在onMounted函数中发送 API 请求，并将获取的数据存储在ref或者reactive响应式状态中，进而更新视图。或者在侦听器watch中我们写的回调函数也被认为是副作用函数，监听数据改变，数据变化回调函数从新执行。

vue中的副作用函数有哪些呢：

主要集中在以下几个方面：

watch侦听器
生命周期钩子（如 mounted和onMounted）
nextTick 函数
……

二、响应式数据的基本实现

const obj = { text: 'hello world' }
function effect() {
  // effect 函数的执行会读取 obj.text
  document.body.innerText = obj.text
}

观察这段代码：

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

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

如果我们能拦截一个对象的读取和设置操作，事情就变得简单了，当读取字段 obj.text 时，我们可以把副作用函数 effect 存储到一个“桶”里，如图所示。

接着，当设置 obj.text 时，再把副作用函数 effect 从“桶”里取出并执行即可，如图所示。

接下来我们就根据如上思路，采用 Proxy 来实现：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
         // 存储副作用函数的桶
         const bucket = new Set()

         // 原始数据
         const data = { text: 'hello world' }
         // 对原始数据的代理
         const obj = new Proxy(data, {
           // 拦截读取操作
           get(target, key) {
             // 将副作用函数 effect 添加到存储副作用函数的桶中
             bucket.add(effect)
             // 返回属性值
             return target[key]
           },
           // 拦截设置操作
           set(target, key, newVal) {
             // 设置属性值
             target[key] = newVal
             // 把副作用函数从桶里取出并执行
             bucket.forEach(fn => fn())
             // 返回 true 代表设置操作成功
             return true
           }
         })
         // 副作用函数
         function effect() {
           document.body.innerText = obj.text
         }
         // 执行副作用函数，触发读取
         effect()
         // 1 秒后修改响应式数据
         setTimeout(() => {
           obj.text = 'hello vue3'
         }, 1000)
    </script>
</body>
</html>

首先，我们创建了一个用于存储副作用函数的桶 bucket，它是Set 类型。接着定义原始数据 data，obj 是原始数据的代理对象，我们分别设置了 get 和 set 拦截函数，用于拦截读取和设置操作。当读取属性时将副作用函数 effect 添加到桶里，即bucket.add(effect)，然后返回属性值；当设置属性值时先更新原始数据，再将副作用函数从桶里取出并重新执行，这样我们就实现了响应式数据。但是目前的实现还存在很多缺陷，例如我们直接通过名字（effect）来获取副作用函数，这种硬编码的方式很不灵活。副作用函数的名字可以任意取，我们完全可以把副作用函数命名为myEffect，甚至是一个匿名函数，因此我们要想办法去掉这种硬编码的机制。这里大家只需要理解响应式数据的基本实现和工作原理即可。