vue.nextTick()方法的使用详解——this.nextTick()的实际应用

vue.nextTick()方法的使用详解——this.nextTick()的实际应用

应用场景

• 获取更新后的DOM的Vue方法

在修改数据之后立即使用这个方法，获取更新后的 DOM。

nextTick()，是将回调函数延迟在下一次dom更新数据后调用**，简单的理解是：**当数据更新了，在dom中渲染后，自动执行该函数。

应用实例

index.vue

<template>
  <div class="hello">
    <div>
      <!--第一步：ref="aa"   设置获取dom元素的锚点 -->
      <button id="firstBtn" @click="testClick()" ref="aa">{{testMsg}}</button>
    </div>
  </div>
</template>
 
<script>
export default {
  name: 'HelloWorld',
  data () {
    return {
      testMsg:"原始值",
    }
  },
  methods:{
    testClick:function(){
      let that=this;
      that.testMsg="修改后的值";
      // 第二步：查看锚点的dom所有参数
      console.log(that.$refs.aa.innerText);   //that.$refs.aa获取指定DOM，输出：原始值
    }
  }
}
</script>

使用this.$nextTick()

methods:{
    testClick:function(){
        let that=this;
        that.testMsg="修改后的值";
        // 第三步：进行数据操作，根据双向绑定数据，实现锚点选中的某个参数进行渲染
        that.$nextTick(function(){
            console.log(that.$refs.aa.innerText);  //输出：修改后的值
        });
    }
}

注意：

1、Vue 实现响应式并不是数据发生变化之后 DOM 立即变化，而是按一定的策略进行 DOM 的更新。$nextTick 是在下次 DOM 更新循环结束之后执行延迟回调，在修改数据之后使用 $nextTick，则可以在回调中获取更新后的 DOM。

2、that.$nextTick只更新锚点绑定的元素dom，不会触发vue的生命周期，也就不存在created和mounted。因为——created()中**使用方法时，**dom还没有渲染；mounted()的钩子函数则是在dom完全渲染后才开始渲染数据。