this.$nextTick()的理解及使用

this.$nextTick()的理解以及使用

概念解释：将回调延迟到下次 DOM 更新循环之后执行。在修改数据之后立即使用它，然后等待 DOM 更新。它跟全局方法 Vue.nextTick 一样，不同的是回调的 this 自动绑定到调用它的实例上。

<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>

点击按钮前：

点击按钮后：

从上图可知，第一次打印的值显示的数据还是赋值之前的，第二次显示的数据就是更新之后的。原因是vue中的dom渲染是异步的。