Vue 3中，數(shù)據(jù)源的修改有了一些變化。在Vue 2中，我們通過(guò)使用$set或者Vue.set方法來(lái)實(shí)現(xiàn)響應(yīng)式的數(shù)據(jù)修改。而在Vue 3中，我們可以直接使用ES6的Proxy來(lái)對(duì)對(duì)象進(jìn)行代理來(lái)實(shí)現(xiàn)數(shù)據(jù)響應(yīng)式。

接下來(lái)，我們來(lái)看一下如何使用Proxy來(lái)對(duì)對(duì)象進(jìn)行代理。

// 創(chuàng)建一個(gè)對(duì)象
const data = {
name: 'Tom',
age: 20
};
// 創(chuàng)建一個(gè)proxy代理data
const proxy = new Proxy(data, {
set(target, key, value) {
console.log(`將${target[key]}設(shè)置為${value}`);
target[key] = value;
return true;
}
});
// 修改代理對(duì)象的age屬性
proxy.age = 22;

上面的代碼中，我們首先創(chuàng)建了一個(gè)普通的JavaScript對(duì)象data，然后創(chuàng)建了一個(gè)Proxy對(duì)象proxy并將data對(duì)象傳入。然后我們?cè)赑roxy的set方法中添加了console.log語(yǔ)句用來(lái)打印被修改的屬性以及新的屬性值。最后我們修改了代理對(duì)象的age屬性，控制臺(tái)將打印出將data對(duì)象中的age屬性修改為22的信息。

通過(guò)Proxy對(duì)象，我們可以更加直觀地對(duì)數(shù)據(jù)進(jìn)行響應(yīng)式的修改。在Vue 3中，我們可以直接使用Proxy對(duì)象來(lái)對(duì)數(shù)據(jù)進(jìn)行代理，無(wú)需使用$set或者Vue.set方法。這不僅減少了代碼的量，同時(shí)也更加符合JavaScript語(yǔ)言本身的特點(diǎn)。