您的位置:

深入理解Vue.js中的before生命周期函数

一、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提供了一系列的生命周期函数,在不同的阶段,你可以做一些事情。通过合理地使用这些函数,可以帮助我们更好地组织代码和实现业务逻辑。