this.$set(obj, key, value)使用

当vue的data里边声明或者已经赋值过的对象或者数组（数组里边的值是对象）时，向对象中添加新的属性，如果更新此属性的值，是不会更新视图的。

1
2
3
4
5
6
7
8
<template>
<div class="hello">
<button @click="setMessage">添加属性</button>
{{ student.name }}
<input type="text" v-model="student.age">
</div>
</template>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<script>
export default {
data() {
return {
student: {
name: '亚索',
}
}
},
methods: {
setMessage() {
this.student.age = 15
console.log(this.student) //此时对象的值更改了，但是视图没有更新
}
}
}
</script>

在这里我们发现虽然这个对象身上已经有了该属性，但是视图层并没有更新该数据，是什么造成的呢？由于受JavaScript的限制，vue.js不能监听对象属性的添加和删除，因为在vue组件初始化的过程中，会调用getter和setter方法，所以该属性必须是存在在data中，视图层才会响应该数据的变化。
解决方法：

1. 利用this.$set(obj, key, value)

   复制代码<script> export default { data() { return { student: { name: '亚索', } } }, methods: { setMessage() { this.$set(this.student, 'age', 15) console.log(this.student) // 数据和视图都已经更新 } } } </script>

   1
   2
   3
   4
   5
   6
   7
   8
   9
   10
   11
   12
   13
   14
   15
   16
   17
   18
   <script>
   export default {
   data() {
   return {
   student: {
   name: '亚索',
   }
   }
   },
   methods: {
   setMessage() {
   this.$set(this.student, 'age', 15)
   console.log(this.student) // 数据和视图都已经更新
   }
   }
   }
   </script>
   

   target: 要更改的数据源（可以是一个对象或者数组）
   key 要更改的具体数据 （索引）
   value 重新赋的值

2. 通过Object.assign(target, sources)方法

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<script>
export default {
data() {
return {
student: {
name: '亚索',
}
}
},
methods: {
setMessage() {
this.student.age = 15
this.student = Object.assign({}, this.student)
console.log(this.student)
}
}
}
</script>

过这两种方式为对象添加属性之后，他的对象身上多了get和set方法，所以，此时我们再次操作该属性的时候，就会引起视图的更新…

以上。

最后

以上就是冷艳发卡最近收集整理的关于this.$set(obj, key, value)使用的全部内容，更多相关this.$set(obj,内容请搜索靠谱客的其他文章。