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

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

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

1. v-if

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

官方文档 v-if

2. $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>

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