vue3.0生命周期的示例代码
在组件化的框架中，比如Angular、React或Vue，都为组件定义了生命周期这个概念，每个组件实例在被创建时都要经过一系列的初始化过程，例如：需要设置数据监听、编译模板、将实例挂载到DOM并在数据变化时更新DOM等。同时，在这个过程中也会运行一些叫做生命周期钩子的函数，它们提供给用户在组件的不同阶段添加自己的代码的机会。
使用过Vue2.x的朋友肯定对它的生命周期钩子很熟悉了，因为在实际的开发过程中我们多多少少会用到他们，比如created、mounted、destoryed等等。而在Vue3.0中，Vue2.xOptionsAPI形式的生命周期钩子函数和新的CompositionAPI都可以使用，来看个示例代码就明白了：
const{onMounted}=Vue
constMyComp={
//OptionsAPI
mounted(){
console.log('>>>>>>mounted1')
},
setup(){
//CompositionAPI
onMounted(()=>{
console.log('++++++mounted2')
})
}
}
两种形式的生命周期函数可以共存（当然实际使用的时候最好只选用一种），它们都会被执行。CompositionAPI形式的生命周期函数都是在setup方法中被调用注册。
最后，在实际的开发过程中，请注意一下OptionsAPI形式的组件生命周期钩子和CompositionAPI之间的实际对应关系：
beforeCreate->请使用setup()
created->请使用setup()
beforeMount->onBeforeMount
mounted->onMounted
beforeUpdate->onBeforeUpdate
updated->onUpdated
beforeDestroy->onBeforeUnmount
destroyed->onUnmounted
errorCaptured->onErrorCaptured
整体代码如下：
const{createComponent,createApp,reactive}=Vue
//计数器组件
constCounter={
props:{
initCount:{
type:Number,
default:0
}
},
template:`
恭喜你，你已经写了
{{state.count}}
斤代码！
写一斤
删库啦
`,
//相当于vue2.xbeforeCreated,created
setup(props){
constcountOps=useCount(props.initCount)
console.log("Counter===>相当于vue2.x中beforeCreated,created")
return{...countOps}
},
onBeforeMount(){
console.log("Counter===>相当于vue2.x中beforeMount")
},
onMounted(){
console.log("Counter===>相当于vue2.x中mounted")
},
onBeforeUpdate(){
console.log("Counter===>相当于vue2.x中beforeUpdate")
},
onUpdated(){
console.log("Counter===>相当于vue2.x中updated")
},
onBeforeUnmount(){
console.log("Counter===>相当于vue2.x中beforeDestroy")
},
onUnmounted(){
console.log("Counter===>相当于vue2.x中destroyed")
},
onErrorCaptured(){
console.log("Counter===>相当于vue2.x中errorCaptured")
}
}
functionuseCount(initCount){
conststate=reactive({count:initCount})
console.log("statereactive",state)
constincrease=()=>{state.count++}
constreset=()=>{state.count=0}
return{state,increase,reset}
}
//创建一个跟组件app
constApp=createComponent({
//这个就相对于在另一个.vue文件引用Counter组件，需要在components属性局部注册组件
components:{
Counter,
},
//挂载到App模板中
template:`
计数器示例
`,
setup(){
console.log("App===>相当于vue2.x中beforeCreated,created")
},
onBeforeMount(){
console.log("App===>相当于vue2.x中beforeMount")
},
onMounted(){
console.log("App===>相当于vue2.x中mounted")
},
onBeforeUpdate(){
console.log("App===>相当于vue2.x中beforeUpdate")
},
onUpdated(){
console.log("App===>相当于vue2.x中updated")
},
onBeforeUnmount(){
console.log("App===>相当于vue2.x中beforeDestroy")
},
onUnmounted(){
console.log("App===>相当于vue2.x中destroyed")
},
onErrorCaptured(){
console.log("Counter===>相当于vue2.x中errorCaptured")
}
})
//启动
//container就是相当于newVue()中el元素
constcontainer=document.querySelector("#app")
//createApp()就是相当于newVue()内部返回的就是newVue()
constapp=createApp()
//挂载组件
app.mount(App,container)
转载自：https://zhuanlan.zhihu.com/p/95968847
到此这篇关于vue3.0生命周期的示例代码的文章就介绍到这了,更多相关vue3.0生命周期内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！
