什么是副作用

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

示例

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

setter

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

msg = 'hello';

如上述代码，msg 的改变就执行了一次 setter，如果 msg 是一个响应式数据，那么这样的一次数据改变，就会影响到对应的视图改变，

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

getter

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

element.innerText = msg;

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

所以可以这么认为，msg 的 getter 行为触发了一次副作用，导致了 element 的 innerText 发生了变化

副作用会产生多个吗

如下代码 obj.value 触发了 setter 导致了 template 中的两个 p 标签的数据都发生了改变，相当于这一次 setter 触发了两次副作用

<template>
  <p>{{ obj.name }}</p>
  <p>{{ obj.age }}</p>
</template>

<script>
const obj = ref({ name: 'wfly', age: 18 });

obj.value = {
  name: 'wf',
  age: 8,
};
</script>