2024年06月21日 建站教程
Vue.js的生命周期有哪些？每个生命周期都有哪些作用？下面web建站小编给大家简单介绍一下！
1.Vue初始化阶段
beforeCreate：实例刚在内存中被创建出来,未初始化 injections 和 data 等。
created：实例已经创建完成,data、computed 等都已被初始化好,这时候还未挂载,$el 属性目前不可见。
beforeMount：模板渲染之前调用,此时 $el 属性还不存在。
mounted：模板渲染完成,所有子组件也都渲染好了,此时可以通过 DOM API 访问数据。
2.Vue更新阶段
beforeUpdate：数据更新时调用,发生在虚拟 DOM 打补丁之前。
updated：有新的虚拟 DOM,在这次更新之后调用。
3.Vue销毁阶段
beforeDestroy：实例销毁之前调用,这时候实例是完全可用的。
destroyed：实例销毁后调用,组件相关的所有东西都会被销毁。
Vue生命周期函数的调用顺序：
beforeCreate -> created -> beforeMount -> mounted -> (beforeUpdate -> updated) * -> beforeDestroy -> destroyed
示列如下：
new Vue({
data() {
return {
msg: 'Hello'
}
},
beforeCreate() {
console.log('beforeCreate')
},
created() {
console.log('created')
},
beforeMount() {
console.log('beforeMount')
},
mounted() {
console.log('mounted')
},
beforeUpdate() {
console.log('beforeUpdate')
},
updated() {
console.log('updated')
},
beforeDestroy() {
console.log('beforeDestroy')
},
destroyed() {
console.log('destroyed')
}
})
本文链接：http://so.lmcjl.com/news/6968/