组件都伴随着生命周期，一个组件通常都存在着创建、更新、销毁等这几个相同的生命周期，而不同的框架由于各自实现的不同，往往提供了除这些共同生命周期之外的一些差异化生命周期。
React
constructor：一个构造器，里面可以接收一个父组件传来的props然后初始化state值。static getDerivedStateFromProps：取代了旧的componentWillMount、componentWillReceiveProps、componentWillUpdate这三个钩子。render：定义展示到页面上的html内容，render执行完后将内容渲染到浏览器上。componentDidMount：在组件挂载完毕后执行。shouldComponentUpdate：当更新state值的时候会执行这个函数，通常用做优化页面的手段。getSnapshotBeforeUpdate：这个钩子可获取到即将要更新的props和state。componentDidUpdate：组件更新完毕执行的钩子函数。componentWillUnmount：组件将要卸载时执行。
除此之外，还有static getDerivedStateFromError、componentDidCatch用来处理页面报错的钩子。老实说，笔者一直对react的生命周期感到头疼。
Vue
在Vue 2.x中，
beforeCreate：实例化之后，数据的观测和事件的配置之前的时候调用。created：在实例创建完成后被立即同步调用。beforeMount：在挂载开始之前被调用。mounted：实例被挂载后调用。beforeUpdate：在数据发生改变后，DOM被更新之前调用。updated：由于数据更改导致的虚拟 DOM 重新渲染，在更新完后会调用该钩子。beforeDestroy：在实例销毁之前调用。destroyed：实例销毁后调用。
当为页面添加了keep-alive属性后，需要注意在activated和deactivated这两个生命钩子中进行一些操作。
在Vue3.x中：
onBeforeMount：在挂载开始之前被调用。onMounted：组件挂载时调用。onBeforeUpdate：数据更新时调用。onUpdated：由于数据更新导致的虚拟 DOM 重新渲染，在更新之后会调用该钩子。onBeforeUnmount：在卸载组件实例之前调用。onUnmounted：卸载组件实例后调用。
同时也提供了在keep-alive时使用的生命周期钩子onActivated、onDeactivated和用于捕获页面错误的钩子onErrorCaptured。
Svelte
onMount：组件首次渲染到DOM后立即执行beforeUpdate：在DOM更新之前执行afterUpdate：数据同步到DOM之后执行onDestroy：组件销毁时执行tick：返回一个promise，让后续代码在下一次微任务中执行
小结
本章我们对比了：
- 三大框架的生命周期函数及流程图
- 框架对外提供的生命周期数量是否越多越好，仁者见仁。一方面，繁多的生命周期钩子可以让开发者更细致地控制组件；而另一方面，大量的生命周期钩子也提升了框架的学习曲线。
