外观
Vue 的生命周期里应该做什么？
创建时准备响应式数据，挂载前模板已经编译成渲染函数，挂载后才能稳定地访问 DOM。更新发生在数据变化之后，卸载时成对取消订阅和定时器。
原理
Vue 3 的选项式钩子：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeUnmount、unmounted。组合式 API 里没有一一对应的创建钩子，setup 本身就在创建阶段运行。挂载后用 onMounted，卸载前用 onBeforeUnmount。
created / setup 里可以发请求，此时还没有 DOM。依赖元素尺寸的逻辑放进 onMounted。服务端渲染没有挂载，访问 DOM 的代码必须放在挂载钩子里。
beforeUpdate 不要再改会触发渲染的状态，容易循环。从状态算出来的值用 computed。
<script setup> 里的顶层代码每个组件实例执行一次，相当于实例创建时。不要在模块顶层放会变的实例状态。
追问
父子组件的顺序？
挂载是父 beforeMount、子挂载完成、父 mounted。所以父的 mounted 里子组件已经挂载。卸载从子到父收尾。
keep-alive 呢？
被缓存的组件不会卸载，而是 activated / deactivated。见 keep-alive。
易错点
- 在
setup里假设ref绑定的 DOM 已经存在。要等onMounted。 - 在更新钩子里发不比较条件的请求，每次渲染都打接口。
- 选项式的
beforeDestroy是 Vue 2 的名字，Vue 3 是beforeUnmount。