Vue3$SideEffect-Overview

P. 程序执行过程

程序的执行分两部分：

1. 初始化：准备数据 & 回调函数
2. 交互：改变数据（副作用）

1. 初始化

初始化是在 <script setup> 和 <template> 中进行的。在 <template> 中 初始化 HTML 内容，在 <script setup> 中初始化数据和函数。

2.0 Side Effect

A side effect is an interaction with the outside world.

交互的结果和目的是改变数据，数据改变引起的外部变化称为副作用。一个动态应用的动态指的就是数据的改变，也就会有副作用。

2.1 产生副作用的方式

共有3种方式产生副作用：

1. 事件：@click="handleClick"
2. 部分组件生命周期钩子：onMounted(() => {})
3. watcher：watch, watchEffect

虽然一些生命周期钩子更像是初始化，但是对于 onMounted 及其之后的钩子在我看来更像是引起数据变化。特别是 onMounted，一些人可能认为是初始化，但它更像是 load 事件，它的行为也是改变数据（初始化的数据更像是空字符串、空数组之类的“空”数据），所以我把它归为副作用。另一点原因是他们可以被 watcher 取代。（一些情况更适合用 watcher）