nextTick的实战常用

Vue中nextTick的实战用法：

需求：关闭弹框后默认展示首页

实例：

用户点击弹框后默认首页高亮显示但是不推荐使用router.push(‘/路由’)，因此要使用nextTick()方法

nextTick()作用：在下次DOM更新循环结束后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM（相当于调用此方法后重新渲染了dom）

nextTick= （）=>{

// 执行的操作

}

###上代码实例：

app.vue

<template>
  <router-view v-slot="{ Component }"  v-if="state.showRouter">
    <transition name="slide-left" mode="out-in">
      <component :is="Component" />
    </transition>
  </router-view>
</template>
<script setup>
  import { defineComponent, nextTick, provide, reactive, ref } from 'vue'
   const state = reactive({
      showRouter: true,
    })
    function reload() {
      // 管弹框后不展示组件
      state.showRouter = false
      // 立即重新渲染dom
      nextTick(() => {
        state.showRouter = true
      })
    }
    // vue3组件通信方式
    provide('reload', reload)

弹框.vue

// 注入刚才的reload方法
const refresh = inject('reload')
.....别处无关代码省略
// 关闭弹框
  const handleClose = () => {
    sessionStorage.setItem('dialogVisible', JSON.stringify(false))
    // 引入的reload方法别名
    refresh()
  }

以上关闭弹框回到首页且高亮的需求便完成了