在 Vue 中,`Vue.set()` 方法用于動(dòng)態(tài)地向響應(yīng)式對(duì)象添加一個(gè)屬性并確保新屬性同樣是響應(yīng)式的,從而觸發(fā)視圖更新。這在某些情況下非常有用,尤其是當(dāng)你需要?jiǎng)討B(tài)添加新屬性到已經(jīng)存在的響應(yīng)式對(duì)象時(shí)。
基本用法如下:
```javascript
Vue.set(target, key, value)
```
其中:
`target` 是你想要添加屬性的對(duì)象。
`key` 是你想要添加的新屬性的名字。
`value` 是你想要設(shè)置的值。
例如,假設(shè)有一個(gè) Vue 實(shí)例 `vm` 和一個(gè)數(shù)據(jù)對(duì)象 `dataObj`:
```javascript
const vm = new Vue({
el: '#app',
data: {
dataObj: {
existingProp: 'This is an existing property'
}
}
});
```
現(xiàn)在,如果你想動(dòng)態(tài)地給 `dataObj` 添加一個(gè)新屬性,可以使用 `Vue.set()`:
```javascript
Vue.set(vm.dataObj, 'newProp', 'This is a new property');
```
此時(shí),新屬性 `newProp` 會(huì)被添加到 `dataObj` 中,并且由于它是通過(guò) `Vue.set()` 添加的,所以它是響應(yīng)式的。這意味著如果后續(xù)更改這個(gè)屬性的值,視圖會(huì)自動(dòng)更新。
另外,你也可以直接在 Vue 實(shí)例的 `data` 對(duì)象上使用 `Vue.set()` 來(lái)添加響應(yīng)式屬性:
```javascript
Vue.set(vm.$data, 'newPropInRoot', 'This is a new property in the root data object');
```
除了在 data 對(duì)象上動(dòng)態(tài)添加屬性之外,Vue 2 中還可以使用 `this.$set()` 方法來(lái)達(dá)到相同的效果(在 Vue 3 中,由于使用了 Proxy 進(jìn)行響應(yīng)式處理,直接使用 `this.$set()` 的場(chǎng)景減少了)。總的來(lái)說(shuō),`Vue.set()` 提供了一種靈活的方式來(lái)動(dòng)態(tài)地向響應(yīng)式對(duì)象添加新的屬性。