Vue—nextTick理解和应用

参考文档

https://cn.vuejs.org/v2/api/index.html?#Vue-nextTick

1. 定义 （什么是nextTick）

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

// 修改数据
vm.msg = 'Hello'
// DOM 还没有更新
Vue.nextTick(function () {
  // DOM 更新了
})

// 作为一个 Promise 使用 (2.1.0 起新增，详见接下来的提示)
Vue.nextTick()
  .then(function () {
    // DOM 更新了
  })

 

2.理解

      1.数据修改     →   DOM更新    →     DOM更新完成nextTick回调   →    获取更新后DOM

 

3.场景模拟

   参考文档 : Vue.js实战

 

    3-1 数据修改

     有一个div，默认用v-if 将它隐藏，点击一个按钮后，改变v-if的值，让它显示出来，同时拿到这个div的文本内容。

     如果v-if 的值是false，直接去获取div的内容div才会被创建，此时再去获取，示例代码如下：

<div id ="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取 div 内容 </button>
</div>

<script>
    var app = new Vue ({
        el: '#app',
        data: {
            showDiv: false
        },
        methods: {
            getText: function () {
               this.showDiv = true;
               var text = document.getElementById('div').innerHTML;
               console.log(text)
            }
        }
    })

</script>

 

3-2 数据修改  →   获取更新后DOM (失败)

这段代码运行后再控制台会抛出一个错误： Cannot read property 'innerHTML of null', 意思就是获取不到div元素

 

3-3 DOM更新

       Vue的异步更新队列，Vue在观察到数据变化时并不是直接更新DOM，而是开启一个队列，并缓冲在同一个事件循环中发生的所有数据改变。在缓冲时会去除重复数据，从而避免不必要的计算和DOM操作。然后在下一个事件循环tick中，Vue刷新队列并执行实际(已去重复的)工作。

       所以如果你用一个for循环来动态改变数据100次，其实它只会应用最后一次改变，如果没有这种机制，DOM就要重绘100次，这固然是一个很大的开销。

      Vue会根据当前浏览器优先使用原生的Promise.then和 MutationObserver，如果都不支持，就会采用setTimeout代替。

 

3-4 DOM更新完成nextTick回调    →    获取更新后DOM

        知道了Vue异步更新DOM的原理，上面示例的报错也就不难理解了。事实上，在执行this.showDiv = true; 时，div仍然还是没有被创建出来，直到下一个Vue事件循环时，才开始创建。$nextTick就是用来知道什么时候DOM更新完成的，修改后代码如下

<div id ="app">
    <div id="div" v-if="showDiv">这是一段文本</div>
    <button @click="getText">获取 div 内容 </button>
</div>

<script>
    var app = new Vue ({
        el: '#app',
        data: {
            showDiv: false
        },
        methods: {
            getText: function () {
               this.showDiv = true;
               this.$nextTick (function () {
                    var text = document.getElementById('div').innerHTML;
                    console.log(text)
               })
            }
        }
    })

</script>

       控制台输出"这是一段文本"

      理论上，我们应该不用去主动操作DOM，因为Vue的核心思想就是数据驱动DOM，但是很多业务里，我们避免不了会使用一些第三方库，比如popper.js、swiper等，这些基于原生JavaScript的库都有创建和更新及销毁的完整生命周期，与Vue配合使用时，就要利用好$nextTick

4. 使用场景

4-1参考文档： https://cn.vuejs.org/v2/api/index.html?#mounted

el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.$el 也在文档内。

注意 mounted 不会承诺所有的子组件也都一起被挂载。如果你希望等到整个视图都渲染完毕，可以用 vm.$nextTick 替换掉 mounted：

mounted: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been rendered
  })
}

 

4-2 参考文档:  https://cn.vuejs.org/v2/api/index.html?#updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。

当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher 取而代之。

注意 updated 不会承诺所有的子组件也都一起被重绘。如果你希望等到整个视图都重绘完毕，可以用 vm.$nextTick 替换掉 updated：

updated: function () {
  this.$nextTick(function () {
    // Code that will run only after the
    // entire view has been re-rendered
  })
}

 

4-3 参考文档  https://cn.vuejs.org/v2/api/index.html#vm-nextTick

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

2.1.0 起新增：如果没有提供回调且在支持 Promise 的环境中，则返回一个 Promise。请注意 Vue 不自带 Promise 的 polyfill，所以如果你的目标浏览器不是原生支持 Promise (IE：你们都看我干嘛)，你得自行 polyfill。

new Vue({
  // ...
  methods: {
    // ...
    example: function () {
      // 修改数据
      this.message = 'changed'
      // DOM 还没有更新
      this.$nextTick(function () {
        // DOM 现在更新了
        // `this` 绑定到当前实例
        this.doSomethingElse()
      })
    }
  }
})