Vue 刷新组件

参考

强制 Vue 组件重新渲染的方法(一) - 掘金 (juejin.cn)

强制 Vue 组件重新渲染的方法(二) - 掘金 (juejin.cn)

环境搭建

创建组件model_a,模拟要刷新的组件,每当重新加载时,都会在控制台输出提示

xml 复制代码
<script setup>
import { onMounted } from 'vue'
onMounted(()=>{
  console.log("加载组件")
})
</script>

<template>
  <div>
    this is a
  </div>
</template>

<style scoped>
</style>

每当点击按钮时,都会去刷新组件

xml 复制代码
<script setup>
import { ref,nextTick } from 'vue'
import model_a from "./model_a.vue"
</script>

<template>
  <model_a></model_a>
  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>

演示

v-if

点击按钮后,flag的值会依次变为flase、true

重点是要等待dom操作结束后,再去更新flag状态由flase转化为true

多次点击后,也会对应的多次刷新组件页面

xml 复制代码
<script setup>
import { ref,nextTick } from 'vue'
import model_a from "./model_a.vue"

let flag = ref(true)
async function refresh(){
  flag.value = false
  await  nextTick()
  flag.value = true
}

</script>

<template>

  <model_a v-if="flag"></model_a>

  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>

key

每次点击按钮后,对应的key会依次加1,此时组件由于Key值变化会重新加载

xml 复制代码
<script setup>
import { ref } from 'vue'
import model_a from "./model_a.vue"

const flag = ref(1)
async function refresh(){
  flag.value += 1
  console.log(flag.value)
}

</script>

<template>

  <model_a :key="flag"></model_a>

  <button style="border: 1px solid #ccc;" @click="refresh">
      refresh
    </button>
</template>

<style scoped>
</style>
相关推荐
麦兜*1 小时前
Spring Boot 集成Reactive Web 性能优化全栈技术方案,包含底层原理、压测方法论、参数调优
java·前端·spring boot·spring·spring cloud·性能优化·maven
知了一笑1 小时前
独立开发第二周:构建、执行、规划
java·前端·后端
UI前端开发工作室2 小时前
数字孪生技术为UI前端提供新视角:产品性能的实时模拟与预测
大数据·前端
Sapphire~2 小时前
重学前端004 --- html 表单
前端·html
遇到困难睡大觉哈哈2 小时前
CSS中的Element语法
前端·css
Real_man2 小时前
新物种与新法则:AI重塑开发与产品未来
前端·后端·面试
小彭努力中2 小时前
147.在 Vue3 中使用 OpenLayers 地图上 ECharts 模拟飞机循环飞行
前端·javascript·vue.js·ecmascript·echarts
老马聊技术3 小时前
日历插件-FullCalendar的详细使用
前端·javascript
咔咔一顿操作3 小时前
Cesium实战:交互式多边形绘制与编辑功能完全指南(最终修复版)
前端·javascript·3d·vue
LuckyLay4 小时前
使用 Docker 搭建 Rust Web 应用开发环境——AI教你学Docker
前端·docker·rust