Vue2的生命周期
    		       		warning:
    		            这篇文章距离上次修改已过444天,其中的内容可能已经有所变动。
    		        
        		                
                在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: 实例销毁后。')
  }
})在这个例子中,每个生命周期钩子都打印了一条消息到控制台,以便了解组件的生命周期中各个阶段的执行情况。
评论已关闭