前言:
vue3现在是比较流行的,但是vue2的项目现在很多,而且我们会遇到把一部分vue2的项目移植到我们的vue3项目里面的情况,在这种情况下,如果我们熟悉vue2与vue3的生命周期顺序的话,对我们帮助是很大的。
vue3生命周期的方法:
setup(){
console.log('Vue3生命周期:setup');
// 渲染
onBeforeMount(()=>{
console.log('Vue3生命周期:onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期:onMounted');
})
// 更新
onBeforeUpdate(()=>{
console.log('Vue3生命周期:onBeforeUpdate');
})
onUpdated(()=>{
console.log('Vue3生命周期:onUpdated');
})
// 卸载
onBeforeUnmount(() => {
console.log('Vue3生命周期:onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期:onUnmounted');
})
},
vue3生命周期的执行顺序:
- setup:创建实例前执行 (没有this)
-
onBeforeMount:渲染组件DOM之前
-
onMounted:渲染组件DOM之后
-
onBeforeUpdate:组件更新前
-
onUpdated:组件更新后
-
onBeforeUnmount:组件销毁前
-
onUnmounted:组件销毁后
vue2+vue3的生命周期一起使用:代码
const app = Vue.createApp({
//vue2
beforeCreate(){
console.log('Vue2生命周期:beforeCreate');
},
created(){
console.log('Vue2生命周期:created');
},
beforeMount(){
console.log('Vue2生命周期:beForeMount');
},
mounted(){
console.log('Vue2生命周期:mounted');
},
beforeUpdate(){
console.log('Vue2生命周期:beforeUpdate');
},
updated(){
console.log('Vue2生命周期:updated');
},
beforeDestory(){
console.log('Vue2生命周期:beforeDeftory');
},
destoryed(){
onsole.log('Vue2生命周期:destoryed');
},
//vue3
setup(){
console.log('Vue3生命周期:setup');
// 渲染
onBeforeMount(()=>{
console.log('Vue3生命周期:onBeforeMount');
})
onMounted(() => {
console.log('Vue3生命周期:onMounted');
})
// 更新
onBeforeUpdate(()=>{
console.log('Vue3生命周期:onBeforeUpdate');
})
onUpdated(()=>{
console.log('Vue3生命周期:onUpdated');
})
// 卸载
onBeforeUnmount(() => {
console.log('Vue3生命周期:onBeforeUnmount');
})
onUnmounted(() => {
console.log('Vue3生命周期:onUnmounted');
})
},
//界面展示,可有可无
template: `111
`
})
最终顺序:
-
Vue3生命周期:setup
-
Vue2生命周期:beforeCreate
-
Vue2生命周期:created
-
Vue3生命周期:onBeforeMount
-
Vue2生命周期:beForeMount
-
Vue3生命周期:onMounted
-
Vue2生命周期:mounted
-
Vue3生命周期:onBeforeUpdate
-
Vue2生命周期:beforeUpdate
-
Vue3生命周期:onUpdated
-
Vue2生命周期:updated
-
Vue3生命周期:onBeforeUnmount
-
Vue2生命周期:beforeUnmount
-
Vue3生命周期:onUnmounted
-
Vue2生命周期:unmounted
总结
同一个阶段的生命周期Vue3先执行,后执行vue2生命周期,然后再执行下一个阶段的生命周期。