vue 生命周期 （更新中）

一 生命周期 （更新中）

一、beforeCreate 建立前

【注】这个阶段，不能使用 this 变量，data() 中的数据、menthods() 中的方法、watcher() 中的事件都不能得到。

【例】添加 loading 事件，在加载实例时触发

 

二、created 建立完毕

【注】这个阶段，能够操做vue实例中的数据和方法，不能操做 dom 节点

【例】初始化完成时事件，结束 loading 事件，异步请求

 

三、beforeMounte 挂在前

【注】在挂载开始以前被调用，相关的 render 函数首次被调用。

 

四、mounted 挂载结束

【注】这个阶段，dom 节点被渲染到文档内，能够操做 dom节点

【例】挂载元素，获取 dom 节点

 

五、beforeUpdate 更新前

【注】

 

六、updated 更新完成

【注】

【例】对数据的统一处理

 

七、beforeDestroy 销毁前

【注】

【例】确认中止事件的确认框

 

八、destroyed 销毁完成

【注】

 

二 关于 nextTick

【注】在下次 DOM 更新循环结束以后执行延迟回调。在修改数据以后当即使用这个方法，获取更新后的 DOM。

【例】更新数据后当即操做 dom 节点

created() {
  setTimeout(() => {
    this.number = 100
    this.$nextTick(() => {
      console.log('nextTick', document.getElementsByTagName('p')[0])
    })
  },100)
}    

 

Vue.nextTick() 的用法：

(1) 若是要在 create() 函数中进行 dom 操做，就要将对 dom 的操做放在 Vue.nextTick() 的回调函数中。 缘由：create() 函数执行期间 dom 还未渲染，mounted() 函数执行期间，dom 的挂载和渲染都已完成。

(2) 数据变化时执行某一操做，这个操做须要使用随数据变化而变化的 dom 结构，须要将这一操做访入 Vue.nextTick() 的回调函数总才能实现。