有使用過vm.$set嗎，原理是什么？
vm.$set 是 Vue.js 提供的一個(gè)方法，用于在 Vue 實(shí)例中動(dòng)態(tài)添加響應(yīng)式屬性。它的主要作用是確保新添加的屬性能夠被 Vue 的響應(yīng)式系統(tǒng)監(jiān)測(cè)到，從而觸發(fā)視圖的更新。
使用示例
假設(shè)我們有一個(gè) Vue 實(shí)例
var vm = new Vue({
data: {
user: {
name: 'Alice'
}
}
});我們希望在 user 對(duì)象中添加一個(gè)新的屬性 age。直接添加不會(huì)觸發(fā)視圖更新
vm.user.age = 25; // 直接添加不會(huì)觸發(fā)視圖更新為了確保新添加的屬性是響應(yīng)式的，可以使用 vm.$set
vm.$set(vm.user, 'age', 25);原理
Vue 的響應(yīng)式系統(tǒng)是基于 Object.defineProperty 實(shí)現(xiàn)的。當(dāng)一個(gè)對(duì)象被添加到 Vue 實(shí)例的 data 中時(shí)，Vue 會(huì)遞歸地遍歷該對(duì)象的所有屬性，并使用 Object.defineProperty 將這些屬性轉(zhuǎn)換為 getter 和 setter，從而實(shí)現(xiàn)響應(yīng)式。然而，直接添加的新屬性并沒有通過這種方式定義，因此 Vue 無法檢測(cè)到這些新屬性的變化。vm.$set 方法內(nèi)部使用了 Vue 的 set 方法，它會(huì)確保新添加的屬性也能通過 Object.defineProperty 轉(zhuǎn)換為響應(yīng)式屬性。
vm.$set 的實(shí)現(xiàn)
Vue 源碼中 set 方法的實(shí)現(xiàn)（Vue 2.x）大致如下：
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();
}
});
}總結(jié)
vm.$set 方法在 Vue 中用于動(dòng)態(tài)添加響應(yīng)式屬性，確保新屬性能夠被 Vue 的響應(yīng)式系統(tǒng)監(jiān)測(cè)到。它通過 Object.defineProperty 將新屬性定義為響應(yīng)式屬性，并觸發(fā)依賴更新，確保視圖能夠正確更新。
使用工具學(xué)會(huì)使用只是第一步，掌握原理并能夠通過原理解決問題才是關(guān)鍵，在平時(shí)的開發(fā)中，使用時(shí)多數(shù)，然而在遇到復(fù)雜問題或者優(yōu)化時(shí)候掌握原理會(huì)提高開發(fā)效率。
