vue官方文档中的深入响应式原理中有提到过，对于检测变化的一些注意事项。
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
这句话是啥意思呢？
我们先看一个小例子。
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user.age = 20; }
}
});
</script>
首先我们在data中写了一个空的user对象，created钩子函数中，我们在user对象中添加了一个name属性，赋值为Ray。
然后我们写了一个按钮，重点的就是这个按钮的操作，我们想在这个按钮里继续添加一个age属性，赋值为20。
按照正常的逻辑来说，这应该是没问题的。
下面我们看看页面的渲染情况。
在控制台输出了语句，说明我们触发了点击事件，但是age的值并没有被渲染到页面上。
这是咋回事呢，这就是vue官方提示的注意事项。
由于 JavaScript 的限制，Vue 不能检测数组和对象的变化。尽管如此我们还是有一些办法来回避这些限制并保证它们的响应性。
下面我们看一下如何解决这个问题？
vue提供了一个API，Vue.$set(object,key,value)，用于避免这种问题的发生。
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.$set(this.user,'age',20); }
}
});
</script>
我们使用vue提供的这个API之后，再看页面的渲染结果。
果然，可以正常地显示age属性的内容。
但是上面这种API，Vue.$set(object,key,value)，一次只能添加一个属性。如果我们想一下添加多组属性呢？
vue也为我们提供了对策。
<div id="app">
<h3>{
{
user.name}},{
{
user.age}}</h3>
<button @click='handlerAdd'>添加属性</button>
</div>
<script>
new Vue({
el:'#app',
data:{
user:{
}
},
created () {
this.user.name = 'Ray'
},
methods: {
handlerAdd(){
console.log('触发点击事件');
this.user = Object.assign({
},this.user,{
age:20,
phone:18331092918
})
}
}
});
</script>
Object.assign({}, this.someObject, { key1: value1, key2: value2 })
下面我们看一下页面的展示效果：
果然，非常的nice。
今天这个知识点还是比较重要的，无论是面试还是我们日常的开发，都可能会踩这个坑。
有微信小程序课设、毕设需求联系个人QQ：505417246
关注下面微信公众号，可以领取微信小程序、Vue、TypeScript、前端、uni-app、全栈、Nodejs、Python等实战学习资料
最新最全的前端知识总结和项目源码都会第一时间发布到微信公众号，请大家多多关注，谢谢！
