33.Vue3：组件生命周期

MyComponent.vue

<template>
<h3>测试生命周期组件</h3>
<p>{{message}}</p>
<button @click="message='更新数据'">更新按钮</button>
</template>
<script>
export default{
name:"MyCompoent",
data(){
return{
message:"自定义事件组件交互"
}
},
/*
1.执行与顺序无关
2.不需要手动调用
*/
// 创建时
// 创建前:
beforeCreate(){
console.log("beforeCreate组件创建之前");
},
// 创建完成
created(){
console.log("Created组件创建完成");
},
//渲染时
//渲染前:
beforeMount(){
console.log("beforeMount组件渲染前");
},
//渲染完
mounted(){
console.log("mounted组件渲染完成");
// 可以在此加载网络请求
},
// 更新前
//更新前
beforeUpdate(){
console.log("beforeUpdate组件更新时");
},
//更新完成
updated(){
console.log("updated组件更新完");
},
//卸载时
//卸载前
beforeUnmount(){
console.log("beforeUnmount组件卸载前");
// 卸载前把消耗性能的处理都删除,例如setTimeout
},
//卸载完
updated(){
console.log("unmounted组件卸载完");
}
}
</script>

App.vue

<template>
<img alt="Vue logo" src="./assets/logo.png">
<my-compoent/>
</template>
<script>
import MyCompoent from './components/MyCompoent.vue'
export default {
name: 'App',
components: {
MyCompoent
}
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>

最后

以上就是伶俐胡萝卜为你收集整理的33.Vue3：组件生命周期的全部内容，希望文章能够帮你解决33.Vue3：组件生命周期所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。