Vue组件重新渲染(组件重载)的3种实现方式
更新时间：2024年08月08日 08:47:21 作者：shimh_凉茶
这篇文章主要介绍了Vue组件重新渲染(组件重载)的3种实现方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
我们在开发过程中页面状态变化时，
有时会需要一部分组件重新渲染，
让这些组件里的生命周期重新走一遍
下面提供 3种 方式
1.使用 v-if
v-if可以实现 true (加载)和false(卸载)
// html
<CompTable ref="CompTable" v-if="tableShow"/>
// js
data() {
return {
tableShow: true,
}
}
method: {
// 触发更新事件
updateTable(){
// 卸载
this.tableShow= false
// 建议加上 nextTick 微任务
// 否则在同一事件内同时将tableShow设置false和true有可能导致组件渲染失败
this.$nextTick(function(){
// 加载
this.tableShow= true
})
},
}2.使用组件中的 :key （推荐）
这个最简单实用，
如果需要每次在当前父页面更新时重载CompTable这个子组件就可以用这个方法，
每次父组件更新 :key 都会重新取值，而时间戳每次都是不同的，
组件发现 :key发生变化就会重新渲染
// html <CompTable ref="CompTable" :key="new Date().getTime()"/>
起初我还担心如果把 new Date().getTime() 直接放到 :key 中，
会不会不生效，要不要传个变量给key，
然后像v-if一样手动改变变量的值，
后来发现完全不用，直接放上去就可以。
缺点：
- 如果当前组件同级有input输入框就尴尬了
- 每次输入都会重载这个CompTable组件
- 如果页面有表单就只能用v-if的形式了
3.使用 $forceUpdate()
对于 数据更新 但 ui没有更新 的情况下可以使用this.$forceUpdate
官方解释： 迫使 Vue 实例重新渲染。注意它仅仅影响实例本身和插入插槽内容的子组件，而不是所有子组件。
希望这对你有帮助！
关于 $nextTick，官网上的说法：
为了在数据变化之后等待 Vue 完成更新 DOM，可以在数据变化之后立即 使用 Vue.nextTick(callback)。这样 回调函数将在 DOM 更新完成后被调用。
官网参考：深入响应式原理-异步更新队列
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue3中使用pinia(大菠萝)状态管理仓库，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2023-07-07
当今的Web开发趋势中,前后端分离已经成为一种流行的架构模式,它将前端和后端的开发分离开来,使得前端和后端可以独立进行开发和部署,本文给大家介绍了Vue使用Axios和elementui实现查询分页功能,需要的朋友可以参考下2024-06-06
这篇文章主要介绍了vue金额格式化保留两位小数的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-04-04
本文主要介绍了el-upload多选文件上传报错解决方案，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-07-07
今天小编就为大家分享一篇使用axios请求时,发送formData请求的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-10-10
Vue路由对象属性 .meta $route.matched详解
今天小编就为大家分享一篇Vue路由对象属性 .meta $route.matched详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
vue.prototype和vue.use的区别和注意点小结
这篇文章主要介绍了vue.prototype和vue.use的区别和注意点小结,本文给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2023-04-04
今天小编就为大家分享一篇解决Vue 项目打包后favicon无法正常显示的问题，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了Vue3.0手写轮播图效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue同步父子组件和异步父子组件的生命周期顺序问题,需要的朋友可以参考下2018-10-10
最新评论