对于this.$nextTick代码的理解

我们都知道DOM的更新是异步的,Vue的绑定原理就是用数据区驱动视图,视图也能驱动数据，两者是双向绑定的。

如何立马获取到更新之后的DOM呢？

可以使用:

<template>
  <div class="" ref="aa">
    {{ a }}
    <button @click="fn">点击</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 1,
    };
  },
  methods: {
    fn() {
      this.a = 2;
      this.$nextTick(() => {
        console.log(this.$refs.aa.innerHTML);
      });
    },
  },
  components: {},
};
</script>

<style scoped lang="less"></style>

不使用的情况：

使用的情况：

个人的第二种见解

   fn() {
      this.a = 2;
      setTimeout(() => {
             console.log(this.$refs.aa.innerHTML);
      }, 0);
    },

使用了一个0秒的定时器,任然能达到相应的效果

总结

当平常开发的时候,如果修改数据之后,想要立马获取修改之后的DOM，我们可以采取以上的两个方法,用0秒的定时器解决，或者用this.$nextTick的回调来解决问题。