vue3 选项式生命周期API 和 组合式生命周期API 执行先后顺序
***** //code=====
import { defineComponent, nextTick, onMounted, onBeforeMount, onBeforeUnmount, onUnmounted,onActivated, onDeactivated } from 'vue'
export default defineComponent({
name: "Checkquality",
props: {userData: Object, businessList: Array, role: Number},
beforeCreate(){
console.log('-----beforeCreate----');
},
created(){
console.log('-----created----');
},
beforeMount(){
console.log('---beforeMount----');
},
mounted(){
console.log('---mounted----');
},
beforeDestroy(){
//beforeDestroy 该方法已删除,不执行
console.log('-----beforeDestroy----');
},
destroyed(){
//beforeDestroy 该方法已删除,不执行
console.log('-----destroyed-----');
},
beforeUnmount(){
console.log('---beforeUnmount----');
},
unmounted(){
console.log('------unmounted------');
},
beforeUpdate(){
console.log('----beforeUpdate----');
},
updated(){
console.log('----updated----');
},
setup(props) {
onBeforeMount(()=>{
console.log('----onBeforeMount----');
})
onBeforeUnmount(()=>{
console.log('----onBeforeUnmount---');
})
onUnmounted(()=>{
console.log('----onUnmounted-----');
})
onActivated(()=>{
console.log('----onActivated-----')
})
onDeactivated(()=>{
console.log('----onDeactivated----');
})
onBeforeUpdate(()=>{
console.log('----onBeforeUpdate----');
})
onUpdated(()=>{
console.log('----onUpdated----');
})
console.log('----setup---');
onMounted(() => {
console.log('----onMounted---')
})
return {
***** //code===
}
}
})
执行顺序如下:
----setup--- -----beforeCreate---- -----created---- ----onBeforeMount---- ---beforeMount---- ----onMounted--- ---mounted---- //组件更新 ----onBeforeUpdate---- ----beforeUpdate---- ----onUpdated---- ----updated---- //组件卸载 ----onBeforeUnmount--- ---beforeUnmount---- ----onUnmounted----- ------unmounted------
(图片来源网络,侵删)
文章版权声明:除非注明,否则均为主机测评原创文章,转载或复制请以超链接形式并注明出处。
