vue项目中this.$nextTick()的使用

​​this.$nextTick()​​将回调延迟到下次 ​​DOM​​​ 更新循环之后执行。在修改数据之后立即使用它，然后等待 ​​DOM​​​ 更新。它跟全局方法 ​​Vue.nextTick ​​​一样，不同的是回调的​​this​​​自动绑定到调用它的实例上。假设我们更改了某个​​dom​​​元素内部的文本，而这时候我们想直接打印出这个被改变后的文本是需要​​dom​​​更新之后才会实现的，也就好比我们将打印输出的代码放在​​setTimeout(fn, 0)​​中。例如：

<template>
  <section>
    <div ref="hello">
      <h1>Hello World ~</h1>
    </div>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    methods: {
      get() {
      }
    },
    mounted() {
      console.log(333);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(444);
        console.log(this.$refs['hello']);
      });
    },
    created() {
      console.log(111);
      console.log(this.$refs['hello']);
      this.$nextTick(() => {
        console.log(222);
        console.log(this.$refs['hello']);
      });
    }
  }
</script>

打印结果如下：

可以根据打印的顺序看到，在​​created()​​​钩子函数执行的时候​​DOM ​​​其实并未进行任何渲染，而此时进行​​DOM​​​操作并无作用，而在​​created()​​​里使用​​this.$nextTick()​​​可以等待​​dom​​​生成以后再来获取​​dom​​对象。

再看一个例子：

<template>
  <section>
    <h1 ref="hello">{{ value }}</h1>
    <el-button type="danger" @click="get">点击</el-button>
  </section>
</template>
<script>
  export default {
    data() {
      return {
        value: 'Hello World ~'
      };
    },
    methods: {
      get() {
        this.value = '你好啊';
        console.log(this.$refs['hello'].innerText);
        this.$nextTick(() => {
          console.log(this.$refs['hello'].innerText);
        });
      }
    },
    mounted() {
    },
    created() {
    }
  }
</script>

打印结果如下：

根据上面的例子可以看出，在方法里直接打印的话， 由于​​dom​​​元素还没有更新， 因此打印出来的还是未改变之前的值，而通过​​this.$nextTick()​​​获取到的值为​​dom​​更新之后的值。

​​this.$nextTick()​​​在页面交互，尤其是从后台获取数据后重新生成​​dom​​对象之后的操作有很大的优势，我们可以利用该方法优化我们的代码。

<template>
    <button ref="tar" 
        type="button" 
        name="button" 
        @click="testClick">{{content}}</button>
</template>
 
<script>
    export default {
        data () {
            return {
                content: '初始值'
            }
        }
　　　　 methods: {
　　　　　　 testClick(){
　　　　　　　　 this.content = '改变了的值'
　　　　　　　　 // 这时候直接打印的话，由于dom元素还没更新
　　　　　　　　 // 因此打印出来的还是未改变之前的值
　　　　　　　　 console.log(that.$refs.tar.innerText) // 初始值
　　　　　　 }
　　　　 }
    }
</script>

​​this.$nextTick()​​​这个方法作用是当数据被修改后使用这个方法会回调获取更新后的​​dom​​再渲染出来。

methods：{
    testClick() {
        this.content = '改变了的值'
        this.$nextTick(() => {
            // dom元素更新后执行，因此这里能正确打印更改之后的值
            console.log(that.$refs.tar.innerText) // 改变了的值
        })
    }
}