vue 生命周期 （更新中）

Posted 2022-12-01 miny-simp

一 生命周期 （更新中）

1、beforeCreate 创建前

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

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

 

2、created 创建完毕

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

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

 

3、beforeMounte 挂在前

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

 

4、mounted 挂载结束

【注】这个阶段，dom 节点被渲染到文档内，可以操作 dom节点

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

 

5、beforeUpdate 更新前

【注】

 

6、updated 更新完成

【注】

【例】对数据的统一处理

 

7、beforeDestroy 销毁前

【注】

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

 

8、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() 的回调函数总才能实现。