vue改變了數據卻沒有自動刷新

有兩個按鈕，按鈕上有個number屬性，當此值為偶數時，按鈕顯示為紅色。
最初的數據如下："a": [{ name: "one" },{ name: "two",number: 2 }]
現象如下：當點擊第一個按鈕時，數據變了，界面卻沒有相應刷新；這是再點擊第二個按鈕，發現第二個按鈕是正常的，並且當第二個按鈕刷新的時候，第一個按鈕也跟着刷新了。
原因在於：a.number=undefined，這是一個常量，當第一次渲染時，第一個按鈕的class並沒有和第一個對象的屬性number進行綁定，所以當number變化時，不會觸發界面刷新。當第二個按鈕導致界面刷新時，第一個按鈕也會跟着刷新界面。vue中提供了Vue.$forceUpdate()方法用於強制界面刷新。
結論：在綁定屬性時，不要綁定undefined的屬性，否則無法及時觸發界面刷新。

<template>
  <div>
    <span v-for="(x,ind) in a"
      :key="ind"
      @click="clickSpan(x)"
      :class="{redNumber:x.number%2==0}">
      {{x.name}}: {{x.number}}
    </span>
  </div>
</template>
<script>
export default {
  data() {
    return {
      "a": [{ name: "one" },{ name: "two",number: 2 }]
    }
  },
  methods: {
    clickSpan(x) {
      if (!x.number) x.number = 0;
      x.number += 1
    }
  }
}
</script>
<style>
.redNumber {
  color: red;
}
* {
  font-size: 20px;
  user-select: none;
}
</style>

參考資料

vue列表渲染