[Vue]組件強制刷新/重新渲染

問題描述：

父組件（father）中，通過visible屬性來控制子組件(son)的顯示與隱藏，如下：

// 父組件father.vue
<template>
  <div class="wrap">
    <!-- 流程 -->
    <son @show="showPopup"></son>
    <!-- 彈出框 -->
    <div :visible="visible">
      <!-- 流程 -->
      <son :active.sync="active" @show="showTimeline"></son>
      <!-- 時間軸 -->
      <div>這是時間軸</div>
    </div>
  </div>
</template>

• 代碼解釋：
  在父組件中，使用了兩次子組件，需求情景如下：
  
  在一流程（稱為：流程a）中，有多個環節，以各種不同的圖標表示，當點擊某一圖標時，會出現彈出框，彈出框會再一次顯示這一流程(稱為：流程a'），用戶可以通過點擊彈出框中的某一圖標查看對應時間軸。
  
  要求：用戶可通過在流程a中點擊查看對應時間軸，也可在彈出框中查看時間軸（時間軸的出現只在彈出框中）。
  
  showDrawer()方法實現彈出框與時間軸的顯示，showTimeline()方法實現時間軸的顯示。
  
  visible屬性控制彈出層的顯示與隱藏，active屬性控制流程中環節圖標的高亮。@show事件表示子組件son通過show調用父組件father的方法，做到彈出框/時間軸的顯示。

// 子組件son.vue
<template>
  <div>
    <div v-for="(item, index) in stepList" :key="index">
      <div @click="show">{{item}}</div>
    </x-row>
  </div>
</template>

<script>

// js 部分代碼
export default {
  methods: {
    show(item) {
      this.$emit("show", item);
    }
  }
};
</script>

• 代碼解釋：
  子組件中stepList數組中包括流程各環節，通過click事件來調用父組件中的方法。

問題出現：

點擊流程a的第二個圖標，圖標高亮，出現彈出框，流程a'相同圖標高亮，且出現相應的時間軸。在流程a'中點擊另一圖標，會出現相應時間軸，但是：

問題1：流程a'的高亮圖標與流程a的不同，換句話說，流程a的高亮圖標不會隨着流程a'的圖標高亮而變化。

TODO：問題1待解決。

繼續操作：

點擊流程a'的第三個圖標，該圖標高亮，流程a還停留在第二個圖標高亮，關閉彈出框，點擊流程a的第一個圖標，出現彈出框，流程a'的第三個圖標高亮，並不是與流程a一致（正常效果應該是：點擊流程a的第一個圖標，流程a'的第一個圖標高亮）：

問題2：監聽stepList和active數據變化，一切正常，時間軸顯示數據正確，只是流程a'的圖標高亮顯示錯誤。

問題2根源：其實是子組件沒有重新遍歷新的stepList數組。
解決方法：流程a'強制刷新/重新渲染。在彈出框的son組件中添加*** :key="timer" ***

// 父組件father.vue
<template>
  <div class="wrap">
    <!-- 流程 -->
    <son @show="showPopup"></son>
    <!-- 彈出框 -->
    <div :visible="visible">
      <!-- 流程 -->
      <son :active.sync="active" @show="showTimeline" :key="timer"></son>
      <!-- 時間軸 -->
      <div>這是時間軸</div>
    </div>
  </div>
</template>

// js 部分代碼
export default {
  data() {
    return {
      visible: false,
      timer: ""
    };
  },
  methods: {
    showPopup(item) {
      this.visible = true;
      this.timer = new Date().getTime(); // 時間戳做子組件son的key
      this.showTimeline(item); // 獲取時間軸數據
    }
  }
};
</script>

談談子組件強制刷新/重新渲染的4種方法

v-if
:key=""

（睡了，后續補上...）