让我们理解 Vue.next

异步的更新数据
为什么需要 nextTick?
nextTick 的使用场景？

异步的更新数据

首先搞明白一个点 Vue 的响应数据更新是异步的，异步的就存在一些边界情况：

Vue 的响应式数据由于异步还没有更新DOM结构，但是我们访问了 DOM 结构的数据，造成我们访问的还是之前的 DOM 数据，这种边界情况，不是我们想要的结果。但是有时候我们确实需要直接操作 DOM 获取数据。这个时候 Vue.nextTick Api 处理，就可以发挥重要的作用。

为什么需要 nextTick

数据的异步更新和 DOM 直接访问

使用场景

1、如果要在created()钩子函数中进行的DOM操作，由于created()钩子函数中还未对DOM进行任何渲染，所以无法直接操作，需要通过$nextTick()来完成。

2、更新数据后，想要使用js对新的视图进行操作时。

3、在使用某些第三方插件时，这些插件需要dom动态变化后重新应用该插件，这时候就需要使用$nextTick()来重新应用插件的方法。

// 单文件组件的使用情况
<template>
  <div>
    <span id="ab">{{message}}</span>
    <button @click="next">next</button>
  </div>
</template>

<script>
export default {
  name: 'NextTick',
  data() {
    return {
      message: '123'
    }
  },
  methods: {
    next() {
      this.message = 'new message'; // 更改数据
      console.log(this.message)
      var ab = document.getElementById('ab')
      console.log(ab.innerHTML === 'new message') // false
      this.$nextTick(function () {
        console.log(ab.innerHTML === 'new message') // true
      })
    }
  }
}
</script>

<style lang="scss" scoped>

</style>

理解 Vue.nextTick

让我们理解 Vue.next

异步的更新数据

为什么需要 nextTick

使用场景