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>

如果本文對你有幫助，請大佬打賞，謝謝