项目中碰到一个问题，改变一个对象的属性，从控制台打印结果看，属性已经发生改变，但没有更新到视图中
解决：使用this.$set(target,key,value);
百度解释：向响应式对象中添加一个属性，并确保这个新属性同样是响应式的，且触发视图更新。它必须用于向响应式对象上添加新属性，因为 Vue 无法探测普通的新增属性。
注：target：要更改的数据源(可以是对象或者数组); key：要更改的具体数据 value ：重新赋的值
<template>
<div>
<p v-for="(item,index) in items" :key="index">{{item.message}}</p>
<button @click="changeDataHandle">更改数据</button>
</div>
</template>
<script>
export default {
data() {
return {
// 测试数据
items: [{id: '1',message: 'one'},{id: '2',message: 'two'},{id: '3',message: 'three'}],
}
},
mounted() {
this.items[0] = {id: '0',message: '测试数据'};
console.log('items==>>',this.items);//打印结果可以发现，items[0]的数据已经改变，但显示未变
},
methods: {
// 点击时，this.$set改变数据,显示同时改变
changeDataHandle() {
this.$set(this.items,0,{message: '更改后的值',id: '0'});
}
}
}
</script>