vue.set和 this.$set
时间: 2023-11-08 08:05:56 浏览: 57
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()需要传入第一个参数为对象本身,第二个参数为属性名,第三个参数为属性值;而 this.$set()则可以直接在Vue实例上调用,只需传入对象本身、属性名和属性值即可,不需要再将Vue实例作为第一个参数传入。此外,this.$set()也可以用于在嵌套对象中设置属性,因为它会自动递归进行响应式处理。
Vue.set this.$set
Vue.set() 或者 this.$set() 是 Vue 提供的一种方法,用于在响应式对象上添加一个响应式属性。通常情况下,我们可以直接给一个对象添加属性,但是这样添加的属性是不会具备响应式的特性,即当这个属性的值发生改变时,对应的视图不会自动更新。而使用 Vue.set() 或者 this.$set() 添加的属性,则具有响应式特性。
Vue.set() 的语法如下:
```Vue.set(object, propertyName/index, value)```
其中,object 表示要添加属性的对象,propertyName/index 表示属性名或者索引值,value 表示属性值。
this.$set() 与 Vue.set() 的用法相同,只不过是在组件中使用的方法。
举个例子,假设我们有一个 data 对象:
```
data: {
message: 'Hello World',
list: []
}
```
如果我们想要给 list 数组添加一个响应式属性,可以使用如下代码:
```
this.$set(this.list, 0, 'item');
```
这样,在 list 数组中添加了一个值为 'item' 的元素,并且该元素具有响应式特性。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![docx](https://img-home.csdnimg.cn/images/20210720083331.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)