Vue2的生命周期
在Vue2中,生命周期钩子是在组件的生命周期中提供的函数,它们允许在特定的时刻执行代码。Vue2的生命周期可以分为四个主要的阶段:创建前/后、载入前/后、更新前/后、销毁前/后。
下面是Vue2生命周期的详解以及相关代码示例:
beforeCreate
:在实例初始化之后,数据观测(data observer)和事件/watcher 设置之前被调用。created
:实例已经创建完成之后被调用。在这一步,实例已完成以下的配置:数据观测(data observer),属性和方法的运算,watch/event
事件回调。然而,挂载阶段还没开始,$el
属性目前不可见。beforeMount
:在挂载开始之前被调用。相关的render
函数首次被调用。mounted
:el 被新创建的vm.$el
替换,并挂载到实例上去之后调用。beforeUpdate
:数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。updated
:由于数据更改导致的虚拟 DOM 重新渲染和打补丁,在这之后会调用该钩子。beforeDestroy
:实例销毁之前调用。此时实例仍然完全可用。destroyed
:Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑,所有的事件监听器会被移除,所有的子实例也会被销毁。
代码示例:
new Vue({
data: {
message: 'Hello Vue!'
},
beforeCreate: function () {
console.log('beforeCreate: 实例完全被创建出来之前。')
},
created: function () {
console.log('created: 实例已经创建完成。')
},
beforeMount: function () {
console.log('beforeMount: 挂载开始之前。')
},
mounted: function () {
console.log('mounted: 挂载完成。')
},
beforeUpdate: function () {
console.log('beforeUpdate: 数据更新时。')
},
updated: function () {
console.log('updated: 数据更新完成。')
},
beforeDestroy: function () {
console.log('beforeDestroy: 实例销毁之前。')
},
destroyed: function () {
console.log('destroyed: 实例销毁后。')
}
})
在这个例子中,每个生命周期钩子都打印了一条消息到控制台,以便了解组件的生命周期中各个阶段的执行情况。
评论已关闭