vue之理解异步更新 --- nextTick

Posted 2020-09-20 Wayne Zhu

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue之理解异步更新 --- nextTick相关的知识，希望对你有一定的参考价值。

　　默认情况下，vue中DOM的更新是异步执行的，理解这一点非常重要。

　　当侦测到数据变化时，Vue会打开一个队列，然后把在同一个事件循环（event loop）当中观察到的数据变化的watcher推送进入这个队列，加入一个watcher在一个事件循环中被触发了多次，它只会被推送到队列中一次，然后在进入下一次的事件循环时，Vue会清空队列并进行必要的DOM更新，。在内部，Vue 会使用 MutationObserver 来实现队列的异步处理，如果不支持则会回退到 setTimeout(fn, 0)。 　　

举例来说：

　　当你设置 vm.someDate = ‘ new value ‘ 时， DOM并不会马上更新，而是在异步队列中被清楚，也就是在下一个事件循环中开始执行更新，如果你希望通过更新的DOM状态去做某些事情，那么就必须留意这个细节，尽管vue.js鼓励开发者用“数据驱动”的方式想问题，避免直接操作DOM，但是有时候你可能是想要使用某个熟悉的jQuery插件这种情况该怎么办呢？

　　你可以在数据改变之后，理解调用 Vue.nextTick(callback)，并把你要做的事情放在回调函数中。当Vue.nextTick的回调函数执行时，DOM就是已经更新后的状态了。

实例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>vue</title>
  <script src="https://cdn.bootcss.com/vue/2.3.3/vue.min.js"></script>
</head>
<body>
<div id="example">{{msg}}</div>

  <script>
    var vm = new Vue({
      el: "#example",
      data: {
        msg: "hello"
      }
    });
    vm.msg = "zzw"
    alert(vm.$el.textContent === "zzw");
    Vue.nextTick(function () {
      alert(vm.$el.textContent === "zzw");
    });
  </script>
</body>
</html>

通过这个例子就可以很好的理解了。

除此之外，也有一个实例方法　vm.$nextTick() ，这个方法和全局的Vue.nextTick 的功能一样，但是更方便在组件内部使用，因为它不需要全局的Vue变量，另外它的回调函数中的 this上下文会自动绑定到它的Vue实例中。

Vue.component(‘example‘, {
  template: ‘<span>{{msg}}</span>‘,
  data: function () {
    return {
      msg: ‘not updated‘
    }
  },
  methods: {
    updateMessage: function () {
      this.msg = ‘updated‘
      console.log(this.$el.textContent) // => ‘not updated‘
      this.$nextTick(function () {
        console.log(this.$el.textContent) // => ‘updated‘
      })
    }
  }
})

参考文章：细节与最佳实践

以上是关于vue之理解异步更新 --- nextTick的主要内容，如果未能解决你的问题，请参考以下文章

vue nextTick深入理解－vue性能优化DOM更新时机事件循环机制

简单理解Vue.nextTick(callback)