vue2到3常用生命周期钩子函数的变化

Ⅰ. 实例化 和 数据初始化 （beforeCreate，created => setup）

1. new Vue 从开始 => 结束 [vue2和3 、两版本区别处]
vue2的写法=>

export default {beforeCreate(){console.log('vue的实例 还没new出来！');},created(){console.log('new Vue() => 成功 watch,computed,方法,监听事件 配置完毕');}
}

应用场景及注意：
① 在created 后，还无法获取dom ，rander函数还未执行！
② 一般用于判断用户是否有这个，页面权限，在没有该权限前进行阻止，或跳转其他页面。

vue3的写法=>
beforeCreate => 使用 setup()
created => 使用 setup()

export default {setup(){console.log('setup 中 相当于在beforeCreate和created 之间');}
}

Ⅱ. 实现视图渲染 （beforeMounted 、mounted）

1. rander函数首次调用 => 结束
vue2的写法=>

export default {beforeMount(){console.log('开始 rander 函数，渲染dom ');},mounted(){console.log('dom渲染完成 ，可以获取dom ');}
}

应用场景及注意
1. dom元素从未创建 => 创建结束，mounted之后可以拿去dom .
2. 可以调用接口 ，初始话页面的数据 .

vue3的写法=>
beforeMount => onBeforeMount
mounted => onMounted

export default {
import { onMounted,onBeforeMount} from 'vue'setup() {onBeforeMount(() => {console.log('开始 rander 函数，渲染dom ');})onMounted(() => {console.log('dom渲染完成 ，可以获取dom ');})}
}

Ⅲ. 页面数据发生更新（beforeUpdate，update）

1. 响应数据发生变化是触发
vue2的写法=>

export default {beforeUpdate(){console.log('data中的变量, 要改变了 ');},update(){console.log('data中的变量，发生改变');}
}

应用场景及注意：
1. update的使用场景并不多，而且无法准确知道是那个变量触发了更新

vue3的写法=>
beforeUpdate => onBeforeUpdate
update => onUpdate

export default {
import { onMounted,onBeforeMount} from 'vue'setup() {onBeforeUpdate(() => {console.log('ref 或 reactive 创建的变量, 要改变了 ');})onUpdate(() => {console.log('ref 或 reactive 创建的变量, 发生改变');})}
}

Ⅳ. 组件卸载时（beforeDestroy，destroyed => beforeUnmount，unmounted）

1. 关闭或离开该组件触发 [vue2和3 、两版本区别处]
vue2的写法=>

export default {beforeDestroy(){console.log('将要离开该组件');},destroyed (){console.log('已经离开组件');}
}

应用场景及注意：
1. 处理离开组件的一些逻辑，比如清楚定时器，调用退出用户的接口 == 。

vue3的写法=>
beforeDestroy => beforeUnmount
destroyed => unmounted

export default {
import { onMounted,onBeforeMount} from 'vue'setup() {beforeUnmount(() => {console.log('将要离开该组件');})unmounted(() => {console.log('已经离开组件');})}
}

总结不易，希望uu们不要吝啬你们的👍哟(＾Ｕ＾)ノ~ＹＯ！！如有问题，欢迎评论区批评指正😁