Vue应用——关于nextTick

豆包君
1,401 阅读2分钟

小知识，大挑战！本文正在参与「程序员必备小知识」创作活动

本文已参与 「掘力星计划」 ，赢取创作大礼包，挑战创作激励金

闲时要有吃紧的心思，忙时要有悠闲的趣味

目录

正文

一、什么是 Vue.nextTick()

返回目录

  关于 nextTick，其实官网上面讲的蛮明白的，详情请看：Vue.nextTick( [callback, context] )

语法

Vue.nextTick([callback, context])

参数

  • {Function} [callback]：回调函数，不传时提供promise调用
  • {Object} [context]：回调函数执行的上下文环境，不传默认是自动绑定到调用它的实例上。

用法

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

  简单的理解是：当数据更新了，在 DOM 中渲染后，自动执行该函数。

举个栗子：

<template>
  <div class="hello">
    <div>
      <button id="firstBtn"
        @click="testClick()"
        ref="firstBtn">
        {{ testMsg }}
      </button>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      testMsg: '未更新',
    };
  },
  methods: {
    testClick() {
      // 多次改变数据
      this.testMsg = '已更新';
      this.testMsg = '再次更新';
      this.testMsg = '再再次更新';
      this.testMsg = '再再再次更新';
      this.testMsg = '再再再再次更新';
      this.testMsg = '最后更新';
      // 使用 nextTick回调获取DOM数据，nextTick里面的代码会在DOM更新后执行
      this.$nextTick(() => {
        console.log('nextTick回调：', this.$refs.firstBtn.innerText); // => '最后更新'
      });

      // 也可以作为一个 Promise 使用, 即不传回调
      this.$nextTick().then(() => {
        console.log('nextTick作为Promise：', this.$refs.firstBtn.innerText); // => '最后更新'
      });

      // 想要立即使用更新后的DOM。这样不行，因为设置message后DOM还没有更新
      console.log('直接获取：', this.$refs.firstBtn.innerText); // => '未更新'
      console.log('啥也不干，就是玩。');
    },
  },
};
</script>

  点击按钮，打印出来的结果为:

直接获取： 未更新
啥也不干，就是玩。
nextTick回调： 最后更新
nextTick作为Promise： 最后更新

  从以上例子可以发现：

  1. 我们多次更改了testMsg的值，但最终只能拿到this.testMsg = '最后更新';
  2. 在更改之后直接获取DOM数据的时候，因为此时DOM还没有更新，所以只能拿到更新前的DOM数据未更新
  3. 无论是在nextTick回调函数还是then函数中的方法，都会在当前方法内所有同步代码执行完毕之后再执行，然后就能拿到更新后的DOM数据了

  这是什么原因呢？

原理

JS运行机制（Event Loop）

JS事件循环（Event Loop）

  JS执行是单线程的，它是基于事件循环的。

  1. 所有同步任务都在主线程上执行，形成一个执行栈。
  2. 主线程之外，会存在一个任务队列，只要异步任务有了结果，就在任务队列中放置一个事件。
  3. 当执行栈中的所有同步任务执行完后，就会读取任务队列。那些对应的异步任务，会结束等待状态，进入执行栈。
  4. 主线程不断重复第三步。

  这里主线程的执行过程就是一个tick，而所有的异步结果都是通过任务队列来调度。Event Loop 分为宏任务和微任务，无论是执行宏任务还是微任务，完成后都会进入到一下tick，并在两个tick之间进行UI渲染。

Vue更新策略

  同样，Vue 是异步执行 DOM 更新的。更新过程如下：

  1. 一旦观察到数据变化，Vue 就会开启一个队列，然后把在同一个事件循环 (event loop) 当中观察到数据变化的 watcher 推送进这个队列。
  2. 如果这个 watcher 被触发多次，只会被推送到队列一次。这种缓冲行为可以有效的去掉重复数据造成的不必要的计算和 DOM 操作。
  3. 而在下一个事件循环时，Vue 会清空队列，并进行必要的 DOM 更新。

  所以，当你设置 this.testMsg = '再次更新'; 时，DOM 并不会马上更新，即使你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变。而在异步队列被清空后，也就是下一个事件循环开始时执行更新时才会进行必要的 DOM 更新。

  因此，为了确保得到更新后的DOM，所以设置了 Vue.nextTick() ; 可以在数据变化之后立即使用 Vue.nextTick(callback) ，这样回调函数 callback 在 DOM 更新完成后就会调用。

二、Vue.nextTick() 应用场景

返回目录

  需要在视图更新之后，基于新的视图进行操作。

1. 初始化绑定或操作DOM

  在 created()钩子函数执行的时候 DOM 其实并未进行任何渲染，同样mounted() 不会承诺所有的子组件也都一起被挂载。而此时进行 DOM 操作无异于徒劳，所以如果你希望等到整个视图都渲染完毕, 一定要将 DOM 操作的 js 代码放进 Vue.nextTick() 的回调函数中。

created() {
    // 不使用this.$nextTick()方法会报错
    that.$nextTick(() => {
        that.$refs.firstBtn.innerHTML = "created 中更改了按钮内容"; //写入到 DOM 元素
    });
}

2. 获取数据更新的DOM

  当项目中你想在改变 DOM 元素的数据后基于新的 DOM 做点什么，比如获取v-if控制的DOM节点。必须放进 Vue.nextTick() 的回调函数中.

<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;
  })
}

3.第三方插件中使用

  在使用某个第三方插件时 ，希望在 vue 生成的某些 DOM 动态发生变化时重新应用该插件，也会用到该方法，这时候就需要在 $nextTick 的回调函数中执行重新应用插件的方法。比如使用 swiper 插件通过 ajax 请求图片后的滑动问题。

总结

返回目录

  路漫漫其修远兮，与诸君共勉。

参考文档

后记：Hello 小伙伴们，如果觉得本文还不错，记得点个赞或者给个 star，你们的赞和 star 是我编写更多更丰富文章的动力！GitHub 地址

文档协议

db 的文档库 由 db 采用 知识共享 署名-非商业性使用-相同方式共享 4.0 国际 许可协议进行许可。
基于github.com/danygitgit上的作品创作。
本许可协议授权之外的使用权限可以从 creativecommons.org/licenses/by… 处获得。

avatar
文章
阅读
粉丝