Vue.nextTick()方法的使用详解

Vue.nextTick(callback) 使用原理

Vue 在更新 DOM 时是异步执行的。当你设置 vm.someData = ‘new value’，该组件不会立即重新渲染，而是在异步队列被清除，也就是下一个事件循环开始时执行更新时才会进行必要的DOM更新。如果此时你想要根据更新的 DOM 状态去做某些事情，就会出现问题。
Vue.js 通常鼓励开发人员使用“数据驱动”的方式思考，避免直接接触 DOM，但是有时我们必须要这么做。为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即使用 Vue.nextTick(callback)。这样回调函数将在 DOM 更新完成后被调用。

什么是Vue.nextTick()

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。 也就是nextTick所指定回调，会在DOM节点更新之后执行

具体使用方法

<template>
  <div id="app">
    <h1 ref="msgRef">msg: {{ msg }}</h1>
    <button @click="change">点击改变msg的值</button>
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return {
      msg:'未更新',
    }
  },
  methods:{
  //点击事件
    change() {
      // 改变msg的值
      this.msg = '已更新'
      // 输出节点的内容，这个时候虽然数据改变了，但DOM还没有更新，所以取到    	的还是msg之前的值未更新
      console.log('msgRef', this.$refs.msgRef['innerHTML']);
      this.$nextTick(() => {
        // 使用this.$nextTick()之后，里面的内容在DOM更新之后执行，所以取到的是msg修改之后的值 '已更新'
        console.log('使用this.$nextTick()之后输出', this.$refs.msgRef.innerHTML);
      });
    }
  }
}
</script>

<style scoped>

</style>