Vue 正確新增或修改物件屬性入門教學筆記 | 學習筆記 - KD's Tech Blog 技術部落格

前言

在 Vue 2（Options API）中，this.$set 是用來在響應式系統中正確新增或修改物件屬性的方法。這對於動態新增屬性或修改陣列的指定索引值特別有用。

this.$set(target, propertyName/index, value)

Vue 2 的 reactivity（響應式系統）使用 Object.defineProperty，它無法偵測到新加的屬性或是直接對陣列用索引來賦值。

例如，下面的程式碼是不會觸發畫面更新的：

this.someObj.newKey = 'value'      // 不會觸發更新
this.someArray[1] = 'changed'      // 不會觸發更新

必須改成：

this.$set(this.someObj, 'newKey', 'value')      // 會觸發更新
this.$set(this.someArray, 1, 'changed')         // 會觸發更新

data() {
  return {
    user: {
      name: '小明'
    }
  }
},
mounted() {
  this.$set(this.user, 'age', 30);
}

這樣才能讓 user.age 成為響應式屬性，更新時畫面才會重新渲染。

data() {
  return {
    items: ['a', 'b', 'c']
  }
},
methods: {
  updateItem() {
    this.$set(this.items, 1, 'changed');
  }
}

在 Vue 3 裡，因為 reactivity 系統改用 Proxy，所以可以直接新增或修改屬性，不需要 this.$set 了：

this.someObj.newKey = 'value'   // Vue 3 沒問題
this.someArray[1] = 'changed'   // Vue 3 沒問題

如果你正在寫 Vue 2 的 Tic Tac Toe 遊戲，當你要動態更新棋盤的某個格子時，這樣做就是對的：

this.$set(this.board[row], col, 'X');

這樣才能確保畫面能即時更新。

歡迎分享按讚給予支持和鼓勵！

KD Chang（張凱迪）