vm.$set 是 Vue.js 提供的一個方法，用于在 Vue 實例中動態添加響應式屬性。它的主要作用是確保新添加的屬性能夠被 Vue 的響應式系統監測到，從而觸發視圖的更新。UiX28資訊網——每日最新資訊28at.com

使用示例

假設我們有一個 Vue 實例UiX28資訊網——每日最新資訊28at.com

var vm = new Vue({  data: {    user: {      name: 'Alice'    }  }});

我們希望在 user 對象中添加一個新的屬性 age。直接添加不會觸發視圖更新UiX28資訊網——每日最新資訊28at.com

vm.user.age = 25; // 直接添加不會觸發視圖更新

為了確保新添加的屬性是響應式的，可以使用 vm.$setUiX28資訊網——每日最新資訊28at.com

vm.$set(vm.user, 'age', 25);

原理

Vue 的響應式系統是基于 Object.defineProperty 實現的。當一個對象被添加到 Vue 實例的 data 中時，Vue 會遞歸地遍歷該對象的所有屬性，并使用 Object.defineProperty 將這些屬性轉換為 getter 和 setter，從而實現響應式。然而，直接添加的新屬性并沒有通過這種方式定義，因此 Vue 無法檢測到這些新屬性的變化。vm.$set 方法內部使用了 Vue 的 set 方法，它會確保新添加的屬性也能通過 Object.defineProperty 轉換為響應式屬性。UiX28資訊網——每日最新資訊28at.com

vm.$set 的實現

Vue 源碼中 set 方法的實現（Vue 2.x）大致如下：UiX28資訊網——每日最新資訊28at.com

function set(target, key, val) {  if (Array.isArray(target) && isValidArrayIndex(key)) {    target.length = Math.max(target.length, key);    target.splice(key, 1, val);    return val;  }  if (key in target && !(key in Object.prototype)) {    target[key] = val;    return val;  }  const ob = target.__ob__;  if (!ob) {    target[key] = val;    return val;  }  defineReactive(ob.value, key, val);  ob.dep.notify();  return val;}function defineReactive(obj, key, val) {  const dep = new Dep();  let childOb = observe(val);  Object.defineProperty(obj, key, {    enumerable: true,    configurable: true,    get: function reactiveGetter() {      const value = val;      if (Dep.target) {        dep.depend();        if (childOb) {          childOb.dep.depend();        }      }      return value;    },    set: function reactiveSetter(newVal) {      const value = val;      if (newVal === value || (newVal !== newVal && value !== value)) {        return;      }      val = newVal;      childOb = observe(newVal);      dep.notify();    }  });}

總結

vm.$set 方法在 Vue 中用于動態添加響應式屬性，確保新屬性能夠被 Vue 的響應式系統監測到。它通過 Object.defineProperty 將新屬性定義為響應式屬性，并觸發依賴更新，確保視圖能夠正確更新。UiX28資訊網——每日最新資訊28at.com

使用工具學會使用只是第一步，掌握原理并能夠通過原理解決問題才是關鍵，在平時的開發中，使用時多數，然而在遇到復雜問題或者優化時候掌握原理會提高開發效率。UiX28資訊網——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-99638-0.html有使用過vm.$set嗎，原理是什么？

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

上一篇： 運小沓 Cuber?數字員工 3.0 發布，WAIC2024 壹沓科技供應鏈論壇順利舉辦

下一篇： 我跟你說@RefreshScope跟Spring事件監聽一起用有坑！