vue中$set的用法
时间: 2023-10-13 08:28:09 浏览: 79
vue中$set的使用(结合在实际应用中遇到的坑)
5星 · 资源好评率100%
在Vue中,$set是用来更新数组或对象的方法。它的语法为:
```javascript
Vue.set(target, key, value)
```
其中,target是要更新的数组或对象,key是要更新的属性名或数组下标,value是要更新的值。
使用$set的好处在于,它能够触发响应式更新。换句话说,当我们直接使用下标或属性名来更新数组或对象时,Vue无法检测到这个变化,从而无法更新视图。而使用$set可以告诉Vue有一个新的属性被添加或已经被更新,从而触发视图的更新。
举个例子,我们有一个数组:
```javascript
data: {
list: ['a', 'b', 'c']
}
```
如果我们直接使用下标来更新数组:
```javascript
this.list[0] = 'd'
```
这个变化不会被Vue检测到,因此视图不会更新。而如果我们使用$set来更新数组:
```javascript
Vue.set(this.list, 0, 'd')
```
这个变化就会被Vue检测到,并触发视图的更新。
同样的,如果我们有一个对象:
```javascript
data: {
obj: {
name: 'Tom',
age: 18
}
}
```
如果我们直接使用属性名来更新对象:
```javascript
this.obj.name = 'Jerry'
```
这个变化也不会被Vue检测到。而如果我们使用$set来更新对象:
```javascript
Vue.set(this.obj, 'name', 'Jerry')
```
这个变化就会被Vue检测到,并触发视图的更新。
总之,$set方法能够让我们在更新数组或对象时,让Vue能够检测到变化,从而触发视图的更新。
阅读全文