vue.set和this.$set的区别
时间: 2023-10-28 19:54:44 浏览: 37
Vue.set() 和 this.$set() 都用于在Vue实例或其数据中动态添加或修改响应式属性。它们的区别在于使用方法:Vue.set()需要传入第一个参数为对象本身,第二个参数为属性名,第三个参数为属性值;而 this.$set()则可以直接在Vue实例上调用,只需传入对象本身、属性名和属性值即可,不需要再将Vue实例作为第一个参数传入。此外,this.$set()也可以用于在嵌套对象中设置属性,因为它会自动递归进行响应式处理。
相关问题
vue.set和 this.$set
vue.set和this.$set都是用来在Vue实例中设置响应式属性的方法。它们的作用是相同的,但是使用方式略有不同。
vue.set的使用方式如下:
```
Vue.set(obj, propertyName, value)
```
this.$set的使用方式如下:
```
this.$set(obj, propertyName, value)
```
其中,obj是要设置属性的对象,propertyName是要设置的属性名,value是要设置的属性值。
这两个方法的作用是将一个非响应式的对象变成响应式的对象,并且能够触发视图更新。
需要注意的是,如果要在嵌套对象中设置属性,需要使用点号或方括号来访问属性。例如:
```
this.$set(obj.nestedObj, 'propertyName', value)
```
Vue.set 与this.$set的区别
Vue.set()和this.$set()都是用来在Vue实例中设置响应式属性的方法。它们的区别在于使用方式和作用域。
Vue.set()是全局方法,可以在任何地方使用。它的语法是`Vue.set(object, key, value)`,其中object是要设置属性的对象,key是属性名,value是属性值。Vue.set()会将属性设置为响应式属性,即当属性值发生变化时,会触发视图更新。
this.$set()是Vue实例的方法,只能在Vue实例中使用。它的语法是`this.$set(object, key, value)`,其中object是要设置属性的对象,key是属性名,value是属性值。this.$set()也会将属性设置为响应式属性。
总结一下区别:
- Vue.set()是全局方法,可以在任何地方使用;this.$set()是Vue实例的方法,只能在Vue实例中使用。
- Vue.set()的调用方式是`Vue.set(object, key, value)`;this.$set()的调用方式是`this.$set(object, key, value)`。
范例:<<引用:Vue.set()的使用。引用:this.$set()的使用。>>
1. 使用Vue.set()设置响应式属性
```javascript
var vm = new Vue({
data: {
obj: {}
}
})
Vue.set(vm.obj, 'key', 'value')
console.log(vm.obj.key) // 输出:value
```
2. 使用this.$set()设置响应式属性
```javascript
var vm = new Vue({
data: {
obj: {}
},
methods: {
setProperty() {
this.$set(this.obj, 'key', 'value')
}
}
})
vm.setProperty()
console.log(vm.obj.key) // 输出:value
```