Vue中的nextTick

首先我们来看看官网对nextTick的解释

Vue.nextTick(callback)

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

我们通过一个简单的列子来验证

<template>
  <div class="cart">
    <div ref="workNode">
      {{ work }}
    </div>
  </div>
</template>

<script>
export default {
  components: {},
  data() {
    return {
      work: "打杂",
    };
  },
  methods: {},
  mounted() {
    this.work = "打代码";
    console.log(this.$refs.workNode.innerHTML);
    this.$nextTick(() => {
      console.log(this.$refs.workNode.innerHTML, "workNode mounted-$nextTick");
    });
  },
};
</script>

 执行结果如下

还有一种情况，当你想在created里面进行dom操作时，可以写在nextTick里面

对此我们对$refs获取dom元素做一个小小的扩展(以后开发过程中要注意的点)

如果在DOM结构中的某个DOM节点使用了v-if、v-show或者v-for（即根据获得的后台数据来动态操作DOM，即响应式），那么这些DOM在mounted阶段是找不到的。

也就是有时候你会发现你在mounted里面用$refs获取dom，返回undefined

解决办法：在updated生命周期获取

原因：

updated与mounted不同的是，在每一次的DOM结构更新，vue都会调用一次updated(){}钩子函数！而mounted仅仅渲染完成时只执行一次而已。