vue中的NextTick函数使用

在使用vue框架的时候，虽然它鼓励开发人员进行 “数据驱动视图” ，可有时候我们也需要直接去操作dom节点，并且vue也为我们提供了操作dom节点的方法$refs。

下面我们来看一下NextTick的作用：

<template>
  <div>
    <div ref="div1">{{number1}}`<!-- 空 -->`</div>
    <div ref="div2">{{number2}}`<!-- div2 -->`</div>
  </div>
</template>

<script>
export default {
  data(){
    return{
      number1:"",
      number2:""
    }
  },
  created() {
    this.$refs.div1.innerText = "div1";
    this.$nextTick(()=>{
        this.$refs.div2.innerText = "div2";
    })
  }
};
</script>

<style>
</style>

在生命周期created中，dom节点尚未进行挂载，所以直接操作dom节点肯定是无效的，NextTick的作用就是等dom更新完毕之后再执行里面的代码。

NextTick的几种使用场景

1.在生命周期created中：

因为在created()钩子函数执行的时候 DOM 其实并未进行挂载，因此是无法进行DOM操作的，所以此处一定要将DOM操作的js代码放进Vue.nextTick()的回调函数中。(如上例)

2.在数据变化后进行操作：

通过改变数据使某个dom节点进行改变，此时如果在代码下方需要对这个dom节点进行操作，就应当将操作的代码放入到Vue.nextTick()的回调函数中，因为Vue 异步执行 DOM 更新，例如：

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

3.刷新一个组件

<template>
    <a-modal v-if="show"></a-modal>
    // 点击刷新组件
    <a-button @click="refresh">fresh</a-button>    
</template>
<script>
export default{
    data () {
        return {
            show: true
        }
    },
    methods: {
        refresh () {
            this.show = false
            this.$nextTick(() => {
                this.show = true
            })
        }
    }

}
</script>