在 Vue 中，Vue.set()（或?this.$set()）是用于解決響應式數據更新檢測的重要方法，其底層與 Vue 的數據監視原理緊密相關。以下從使用場景和實現原理兩方面詳細說明：

一、Vue.set () 的使用場景與用法

1. 為什么需要 Vue.set ()？

Vue 的響應式系統通過?Object.defineProperty（Vue 2）或?Proxy（Vue 3）實現數據監聽，但存在限制：

• 無法檢測對象新增的屬性或刪除的屬性；
• 無法檢測數組通過索引修改元素或修改數組長度的操作。

此時，直接修改數據不會觸發視圖更新，需要用?Vue.set()?強制觸發響應式更新。

2. 用法

• 語法：

  // 全局方法
  Vue.set(target, propertyName/index, value)// 實例方法（組件內）
  this.$set(target, propertyName/index, value)
  

• 參數：
  • target：需要修改的響應式對象或數組（必須是已被 Vue 響應式系統劫持的對象）；
  • propertyName/index：新增 / 修改的屬性名（對象）或索引（數組）；
  • value：對應的值。

3. 典型場景

• 給對象新增響應式屬性：

  data() {return {user: { name: '張三' }}
  },
  methods: {addAge() {// 直接新增屬性，視圖不會更新this.user.age = 20; // 無效// 使用 $set，視圖會更新this.$set(this.user, 'age', 20); // 有效}
  }
  

• 修改數組的指定元素：

  data() {return {list: ['蘋果', '香蕉']}
  },
  methods: {updateItem() {// 直接通過索引修改，視圖不會更新this.list[1] = '橙子'; // 無效// 使用 $set，視圖會更新this.$set(this.list, 1, '橙子'); // 有效}
  }
  

二、Vue 監視數據的原理

Vue 實現數據響應式的核心是對數據進行劫持，并在數據變化時通知依賴更新視圖。不同 Vue 版本的實現方式略有差異：

1. Vue 2 的響應式原理（Object.defineProperty）

• 初始化劫持：
  當組件初始化時，Vue 會遍歷?data?中的所有屬性，通過?Object.defineProperty?為每個屬性添加?getter?和?setter：

  • getter：當屬性被訪問時觸發，用于收集依賴（記錄哪些視圖 / 計算屬性依賴該數據）。
  • setter：當屬性被修改時觸發，用于通知依賴更新（觸發視圖重新渲染）。

• 局限性：

  • 只能劫持初始化時已存在的屬性，新增屬性默認沒有?getter/setter，因此無法被監測。
  • 數組的?length?修改和索引賦值不會觸發?setter（Vue 對數組的 7 個方法進行了重寫，如?push、splice?等，這些方法會觸發更新，但直接修改索引 / 長度不會）。

2. Vue 3 的響應式原理（Proxy）

• 初始化劫持：
  Vue 3 使用 ES6 的?Proxy?對?data?對象進行代理，生成一個代理對象（Proxy）。Proxy?可以攔截對象的所有操作（包括新增屬性、刪除屬性、索引訪問等），從而解決了 Vue 2 的局限性。

• 優勢：

  • 能監測新增屬性（proxy.xxx = value?會被?set?攔截）；
  • 能監測刪除屬性（delete proxy.xxx?會被?deleteProperty?攔截）；
  • 能監測數組索引修改和長度變化（通過?set?攔截）。

三、Vue.set () 的底層實現邏輯

Vue.set()?的核心作用是手動為數據添加響應式能力，并觸發更新：

1. 對于對象：

   • 檢查目標對象是否為響應式對象（是否有?__ob__?標識，Vue 內部用于標記響應式對象）。
   • 若屬性已存在，則直接修改值并觸發?setter。
   • 若屬性不存在，則通過?Object.defineProperty（Vue 2）或?Proxy?的?set?攔截（Vue 3）為新屬性添加響應式，并手動觸發依賴更新。

2. 對于數組：

   • 調用數組的?splice?方法（Vue 已重寫該方法，會觸發更新），通過?splice(index, 1, value)?實現元素修改，從而觸發視圖更新。

總結

• Vue.set () 的作用：解決 Vue 響應式系統無法檢測 “對象新增屬性”“數組索引修改” 等操作的問題，強制為數據添加響應式并觸發視圖更新。
• 監視數據的原理：
  • Vue 2 基于?Object.defineProperty?劫持屬性的?getter/setter，實現依賴收集和更新通知。
  • Vue 3 基于?Proxy?代理整個對象，攔截所有操作，天然支持更多場景的監測。

理解這一機制有助于避免 “數據修改后視圖不更新” 的常見問題，也能更深入地掌握 Vue 響應式系統的設計思想。