vue之$nextTick

• vue中的dom更新是异步的,参考下面的例子:

<template>
  <div>
    <div
      style="width: 20vw; height: 10vw; border: 1px solid #000000"
      @click="updateData"
      ref="box"
    >
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是msg",
    };
  },
  methods: {
    updateData() {
      this.msg = "msg改变了";
      console.log(this.$refs.box.innerHTML);
    },
  },
};
</script>

输出 我是msg

• 如果想要视图更新之后立刻获取更新后的dom元素,可以使用$nextTick

<template>
  <div>
    <div
      style="width: 20vw; height: 10vw; border: 1px solid #000000"
      @click="updateData"
      ref="box"
    >
      {{ msg }}
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      msg: "我是msg",
    };
  },
  methods: {
    updateData() {
      this.msg = "msg改变了";
      this.$nextTick(() => {
        console.log(this.$refs.box.innerHTML);
      })
    },
  },
};
</script>

输出 msg改变了

• 使用场景
  在created生命周期里对DOM进行操作的时候,因为DOM还未渲染,所以对DOM的操作包在\(nextTick中,等DOM一渲染就立刻执行操作 总结就是: 如果在视图更新后你想在新视图的基础上做些什么的时候,你就需要用到\)nextTick了