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>
相关推荐
hepherd11 分钟前
Flask学习笔记 - 模板渲染
前端·flask
LaoZhangAI12 分钟前
【2025最新】Manus邀请码免费获取完全指南:5种稳定渠道+3个隐藏方法
前端
经常见13 分钟前
浅拷贝与深拷贝
前端
前端飞天猪18 分钟前
学习笔记:三行命令,免费申请https加密证书📃
前端
关二哥拉二胡19 分钟前
前端的 AI 应用开发系列二:手把手揭秘 RAG
前端·面试
斯~内克21 分钟前
前端图片加载性能优化全攻略:并发限制、预加载、懒加载与错误恢复策略
前端·性能优化
奇怪的知识又增长了30 分钟前
Command SwiftCompile failed with a nonzero exit code Command SwiftGeneratePch em
前端
Maofu30 分钟前
从React项目 迁移到 Solid项目的踩坑记录
前端
薄荷味30 分钟前
ubuntu 服务器安装 docker
前端
Carlos_sam31 分钟前
OpenLayers:如何控制Overlay的层级?
前端·javascript