一、beforeCreate
在Vue实例初始化之后,beforeCreate函数会被立即调用。这个函数是Vue中最早的生命周期函数。在这个函数中,你可以做一些比较早期的初始化工作。但是要注意,这个时候数据和事件还没有被初始化,因此你不能访问响应式数据,也不能使用事件系统。
new Vue({ beforeCreate: function () { console.log('beforeCreate') } })
二、created
在beforeCreate之后,created函数会被调用。在这个阶段,Vue实例已经完成了数据和事件的初始化。这个时候,你可以访问响应式数据和使用事件系统。但是要注意,这个时候模版还没有被渲染成最终的DOM。
new Vue({ created: function () { console.log('created') } })
三、beforeMount
在created之后,beforeMount函数会被调用。在这个阶段,Vue实例已经准备好将模版渲染成最终的HTML。但是还没有进行实际的渲染,因此你可以在这个阶段修改模版。
new Vue({ beforeMount: function () { console.log('beforeMount') } })
四、mounted
在beforeMount之后,mounted函数会被调用。在这个阶段,Vue实例已经把模版渲染成实际的HTML,并且挂载到DOM上。这个时候,你可以访问实际的DOM元素。
new Vue({ mounted: function () { console.log('mounted') } })
五、beforeUpdate
在mounted之后,beforeUpdate函数会被调用。在这个阶段,Vue实例的数据已经更新,但是还没有重新渲染成最终的HTML。在这个阶段,你可以访问更新前的DOM和数据。
new Vue({ beforeUpdate: function () { console.log('beforeUpdate') } })
六、updated
在beforeUpdate之后,updated函数会被调用。在这个阶段,Vue实例的数据已经更新,并且已经重新渲染成最终的HTML。这是Vue生命周期中最重要的一个阶段。在这个阶段,你可以访问更新后的DOM和数据。但是要注意,避免在这个阶段修改数据。
new Vue({ updated: function () { console.log('updated') } })
七、beforeDestroy
在Vue实例销毁前,beforeDestroy函数会被调用。在这个阶段,Vue实例仍然完全可用,你可以访问所有的数据和方法。但是要注意,这个时候模版已经被卸载,因此你不能访问实际的DOM元素。
new Vue({ beforeDestroy: function () { console.log('beforeDestroy') } })
八、destroyed
在beforeDestroy之后,destroyed函数会被调用。在这个阶段,Vue实例已经被销毁,所有的事件监听器和计算属性都已经被移除。这个时候,你不能访问任何的数据和方法。
new Vue({ destroyed: function () { console.log('destroyed') } })
总结
Vue提供了一系列的生命周期函数,在不同的阶段,你可以做一些事情。通过合理地使用这些函数,可以帮助我们更好地组织代码和实现业务逻辑。