VUE 同一个组件切换 实现DOM更新

本文介绍在Vue.js中解决组件切换时DOM更新问题的方法,包括使用v-if、$set、$nextTick及修改组件key等技巧,确保数据变化能正确反映到视图上。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

VUE 同一个组件切换 实现DOM更新

在使用vue.js开发时遇到共用一个组件,数据相同,只是展示的内容不同。但是在每次切换时,必须执行DOM更新。 如果你遇到这个问题时,可以试试在切换时 使用 v-if 来判断,官方文档中说是:
v-if “真正”的条件渲染,因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
v-if 也是惰性的:如果在初始渲染时条件为假,则什么也不做——直到条件第一次变为真时,才会开始渲染条件块。

  1. v-if
 <div v-if='false | true'>
 		....
 </div>

官方文档 v-if

  1. $set:如果组件中的变量改变更新DOM:
例如:组件中form.user对象,发生改变需要更新DOM,可以使用
this.$set(this.form,'user','xiaoming')

官方文档 $set

3.$nextTick:在进入页面时,无法获取DOM节点元素:

当第一次进入页面时,无法获取dom节点元素,可以尝试添加 $nextTick
function init(){
  this.nextTick(_=>{
	//运行代码
  })
}

官方文档 $nextTick

4.组件的key,当你以上方法都无法实现DOM更新,可以尝试修改组件的key

定义组件 demo
<template>
	<div> .... </div>
</template>
调用组件 
/* 
  因为每次生成的key都不一样,当vue的虚拟dom在渲染时
  发现组件当前key与以前的key不一致,就把它当成新的组件进行渲染,
  如果key一致则直接复用,组件不会被重新渲染。 
*/
<template>
	<demo :key='loadKey'> .... </demo>
</template>
<script>
import demo from './demo'
export default{
  components:{demo}
  data(){
  return{
    }
  },
  methods:{
    loadKey(){
  	  return new Date().getTime() // 获取当前时间戳
    }
  }	
}
</script>

如果本文对你有帮助,请大佬打赏,谢谢

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值