$nextTick

最新推荐文章于 2024-08-16 17:40:09 发布

为什么选b

最新推荐文章于 2024-08-16 17:40:09 发布

阅读量260

点赞数

分类专栏：面试题文章标签： vue

本文链接：https://blog.csdn.net/weixin_55869886/article/details/116407494

版权

面试题专栏收录该内容

10 篇文章 0 订阅

订阅专栏

原理

Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。

$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

官方示例：

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // modify data
      this.message = 'changed'
      // DOM is not updated yet
      this.$nextTick(function () {
        // DOM is now updated
        // `this` is bound to the current instance
        this.doSomethingElse()
      })
    }
  }
})

用法

官方解释

将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

dom更新：在vue中，你修改了data的某一个值，并不会立即反应到该ele中。vue将你对data的更改放到watcher的一个对列中（异步），只有在当前任务空闲时才会去执行watcher队列任务。中间有一定的延迟。
当执行到$nextTick的时候，这是一个异步事件，也会把这个事件放到一个队列当中，异步事件是不会立即执行的代码，会被js处理器放到一个队列里，按照队列的顺序优先级等一个个按次序执行，新添加的事件都会放在队列末尾。所以，当第一个也就是data的修改执行渲染在页面之后，这个时候执行$nextTick，就肯定能获取dom的数据。