vue的nextTick的使用以及应用场景

首先Vue 在更新 DOM 时是异步执行的。只要侦听到数据变化，Vue 将开启一个队列，并缓冲在同一事件循环中发生的所有数据变更。这种在缓冲时去除重复数据对于避免不必要的计算和 DOM 操作是非常重要的。然后，在下一个的事件循环“tick”中，Vue 刷新队列并执行实际 (已去重的) 工作。
所以就有了nextTick()，是将回调函数延迟在下一次dom更新数据后调用,即当数据更新了在DOM中渲染后自动执行该函数，简单点说就算数据更新了，在dom中渲染后，自动执行该函数。

应用场景以及使用

1.在vue生命周期的created()里进行DOM的操作一定要使用nextTick()，因为created()执行的时候DOM还未进行任何渲染

<template>
  <div class="hello">
    <button ref="text">{{ msg }}</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      msg: '我是按钮的文字',
    }
  },
  created() {
    let that = this
    //that.$refs.text.innerHTML = '我是按钮更改后的文字'
    that.$nextTick(function () {
      that.$refs.text.innerHTML = '我是按钮更改后的文字'
    })
  },
}
</script>

2.点击事件修改v-if默认隐藏组件里的值，v-if为false的时候，这时的div都还没被创建出来，在按钮点击之后改为true才被创建。

<template>
  <div class="hello">
    <div v-if="show" ref="text">旧数据</div>
    <button @click="btn">按钮</button>
  </div>
</template>
<script>
export default {
  name: 'HelloWorld',
  data() {
    return {
      show: false,
    }
  },
  methods: {
    btn() {
      var that = this
      that.show = true
      // that.$refs.text.innerHTML = '新数据'
      that.$nextTick(function () {
        that.$refs.text.innerHTML = '新数据'
      })
    },
  },
}
</script>