logo头像

求知若渴,虚心若愚

Vue - Vue生命周期

Vue生命周期

个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期

生命周期图示

Vue生命周期三个阶段

  • 初始化阶段:
    • 进入页面
  • 更新阶段:
    • 当数据发生变化
  • 卸载阶段:
    • 实例卸载

生命周期函数

整个Vue的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作调用

beforeCreate

  • 可以在这加个loading效果

created

  • 这时DOM还未生成,$el 属性还不存在
  • 发送ajax请求,获取数据,在这结束loading效果

beforeMount

  • 模块编译/挂在之前

mounted

  • 模块编译/挂在之后
  • 可以获取到DOM,然后,就可以进行DOM操作了

beforeUpdate:

  • 更更新前的DOM内容

updated

beforeDestroy

  • 你确认删除XX吗?

destroyed

  • 当前组件已被删除,清空相关内容

Vue.nextTick

  • nextTick由来:
    • 由于Vue的数据驱动视图更新,是异步的,即修改数据的当下,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新
  • 异步执行的运行机制:

    • 所有同步任务都在主线程上执行,形成一个执行栈(execution context stack)
    • 主线程之外,还存在一个”任务队列”(task queue)。只要异步任务有了运行结果,就在”任务队列”之中放置一个事件。
    • 一旦”执行栈”中的所有同步任务执行完毕,系统就会读取”任务队列”,看看里面有哪些事件。那些对应的异步任务,于是结束等待状态,进入执行栈,开始执行。
    • 主线程不断重复上面的第三步
    • 简单来说,Vue 在修改数据后,视图不会立刻更新,而是等同一事件循环中的所有数据变化完成之后,再统一进行视图更新
  • nextTick的触发时机:

    • 在同一事件循环中的数据变化后,DOM完成更新,立即执行nextTick(callback)内的回调
  • 应用场景:
    • 需要在视图更新之后,基于新的视图进行操作
  • 举例:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
// 场景
<div id="app">
<p ref="myWidth" v-if="showMe">{{ message }}</p>
<button @click="getMyWidth">获取p元素宽度</button>
</div>

getMyWidth() {
this.showMe = true;
//this.message = this.$refs.myWidth.offsetWidth;
//报错 TypeError: this.$refs.myWidth is undefined
this.$nextTick(()=>{
//dom元素更新后执行,此时能拿到p元素的属性
this.message = this.$refs.myWidth.offsetWidth;
})
}

TIP
相信你肯定有修改数据后,再获取DOM元素属性的场景,nextTick就是你最好的选中

支付宝打赏 微信打赏

赞赏是对我们的肯定!