什么是副作用 #

在 vue的源码中，会大量的涉及到一个概念，那就是 副作用。

所以我们需要先了解一下副作用代表的是什么意思。

副作用指的是：当我们 对数据进行setter或者 getter操作时，所产生的一系列后果。

那么具体是什么意思呢？ 我们分别来说一下：

setter #

setter所表示的是 赋值 操作，比如说，当我们执行如下代码时：

msg = '你好，世界'

这时 msg 就触发了一次 setter的行为。

那么假如说，msg是一个响应性数据，那么这样的一次数据改变，就会影响到对应的视图改变。

那么我们就可以说：msg的setter行为，触发了一次副作用，导致视图跟随发生了变化。

getter #

getter所表示的是 取值 操作，比如说，当我们执行如下代码时：

element.innerText = msg

此时对于变量 msg而言，就触发了一次 getter操作，那么这样的一次取值操作，同样会导致element的innerText发生改变。

所以我们可以说：msg的getter行为触发了一次副作用，导致element的innerText发生了变化。

副作用会有多个吗？ #

明确好了副作用的基本概念后，想一想：副作用可能会有多个吗？

答： 可以的。

举个简单的例子：

<template>
	<div>
        <p>姓名：{{obj.name}}</p>
        <p>年龄：{{obj.age}}</p>
    </div>
</template>
<script>
	const obj = ref({
        name:'Ned',
        age:20
    })
    obj.value = {
        name:'张三',
        age:18
    }
</script>

这样的一个代码中，obj.value触发了一次setter行为，会导致两个p标签的内容发生改变，也就是产生了两次副作用。

总结 #

1. 副作用指的是：对数据进行 setter 或 getter 操作时，所产生的一系列后果
2. 副作用可能是会有多个的