vue 之 $nextTick

$nextTick 是什么

mounted 和 updated 都不会保证所有子组件都挂载完成，如果想等待所有视图都渲染完成，需要使用 $nextTick

code sand box

<template>
  <div id="app" ref="app">{{ msg }}</div>
</template>

<script>
export default {
  name: "App",
  data: () => ({
    msg: "aaa",
  }),
  mounted() {
    this.msg = "bbb";
    
    const str = this.$refs["app"].innerHTML;
    console.log(str, '---- 获取不到最新值, 需要等待dom渲染完毕再执行');

    this.$nextTick(() => {
      const str = this.$refs["app"].innerHTML;
      console.log(str);
    });
  },
};
</script>

应用场景: 无感刷新

<template>
  <router-view v-if="alive"></router-view>
</template>

<script>
export default {
  name: "App",
  // 使用 provide inject 传给子组件调用 reload 方法刷新
  provide() {
    return {
      reload: this.reload,
    };
  },
  data: () => ({
    alive: true,
  }),
  methods: {
    reload() {
      this.alive = false;
      // router-view消失,
      // 页面重新渲染后出发nextTick的回调
      // alive=true, router-view 再次加载
      this.$nextTick(() => {
        this.alive = true;
      });
    },
  },
};
</script>