React和Vue的生命周期对比表

• 生命周期对比表

阶段	React16.8以前的生命周期钩子函数	React18	Vue	Vue的自定义指令
初始	getDefaultProps 设置默认的props getInitialState 在使用es6的class语法时是没有这个钩子函数的，可以直接在constructor中定义this.state。此时可以访问this.props componentWillMount 组件渲染前被调用 render 渲染模板 componentDidMount 组件挂载成功，第一次渲染后调用，组件已经发生在对应的DOM结构，通过this.getDOMNode()或获取节点，可以在这个周期时获取服务端数据，redux模式在这里绑定数据	constructor static getDerivedStateFromProps（纯函数，静态方法） render componentDidMount	beforeCreate 实例初始化之后，数据观察data observer和event/watch事件配置之前被调用 created （实例创建完成后立即被调用，实例已完成如下配置：数据观察data observer,属性和方法的运算，event/watch回调。$el属性不可见） beforeMount 挂载之前被调用，render函数首次被调用（服务端渲染期不被调用） mounted 不会承诺所有的子组件都一起被挂载	bind:绑定时，自定义指令绑定于相应dom时执行 inserted:指令所在dom添加到父节点时执行，渲染时
更新	componentWillReceiveProps 组件接收到一个新的prop时被调用 shouldComponentUpdate 返回一个布尔值，组件收到新的或state时被调用，常用于优化组件，减少渲染次数 componentWillUpdate 接收到新的props或者state但还没render时调用 render componentDidUpdate 组件更新完后调用	static getDerivedStateFromProps shouldComponentUpdate render getSnapshotBeforeUpdate componentDidUpdate	beforeUpdate 数据更新时调用，发生虚拟dom打补丁之前，适合更新之前访问现有的dom updated 更新完后，组件DOm更新完毕，可以执行依赖于DOM的操作	update:更新时，不保证更新完成（指令所在组件有更新时执行），不保证该更新和当前指令所在dom有关 componentUpdated:更新完成时，指令所在组件更新完成
卸载	componentWillUnmount 从dom中移除时立即被调用	componentWillUnmount	beforeDestory 实例销毁时调用，实例仍然可用 destroyed 销毁实例后调用，与实例相关的所有都会被移动	unbind:解除绑定，类似于beforeDestroy