vue刷新当前页面, Vue.nextTick原理和用法

最新推荐文章于 2024-03-05 17:08:08 发布

吃瓜群众欢乐多

最新推荐文章于 2024-03-05 17:08:08 发布

阅读量2k

点赞数 1

本文链接：https://blog.csdn.net/sinat_36146776/article/details/85068048

版权

index.vue
<div v-if="isRouterAlive">
     <router-view />
</div>

app.vue
  data() {
      return {
        loading: false,
        isRouterAlive:true,
      }
    },
    provide(){
      return {
        reload:this.reload
      }
    },
    methods:{
      reload(){
        this.isRouterAlive = false;
        this.$nextTick(function () {
          this.isRouterAlive = true;
        })
      }
    }


child.vue
//使用
inject: ['reload'],
methods: {
      handleCommand(_command) {
   //调用this.reload();
                this.reload();
        }
      },

    }

this.$nextTick

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

Vue 在修改数据后，视图不会立刻更新，而是等同一事件循环中的所有数据变化完成之后，再统一进行视图更新。

事件循环：

同步代码执行 -> 查找异步队列，推入执行栈，执行Vue.nextTick[事件循环1] ->查找异步队列，推入执行栈，执行Vue.nextTick[事件循环2]...

总之，异步是单独的一个tick，不会和同步在一个 tick 里发生，也是 DOM 不会马上改变的原因。