在工作中遇到数据变了，但是视图没有改变的时候可以使用this.$set方法
用法
向响应式对象中添加一个 property，并确保这个新 property 同样是响应式的，且触发视图更新。
它必须用于向响应式对象上添加新 property，
参数
调用方法：this.$set( target, key, value )
target：要更改的数据源(可以是对象或者[数组])
key：要更改的具体数据
value ：重新赋的值
对象实例
我们在项目开发的过程中，经常会遇到这种情况：为data中的某一个对象添加一个属性
<template>
<div>
<button @click="setData">添加属性</button>
{{ obj.name }}
<input v-model="obj.age">
</div>
</template>
当我们点击按钮，为student添加一个age属性，输入出数据已加上，但是视图没有更数据
<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中，视图层才会响应该数据的变化
使用this.$set(obj, key, value)
this.$set(this.student, 'age', 15)
数组实例
我们在项目开发的过程中，经常会遇到这种情况：改变数组第一个对象的数据，
<template>
<div id="app">
<p v-for="item in items" :key="item.id">
{{item.message}}
</p>
</div>
</template>
<script>
export default {
data () {
return {
items: [
{ message: "one", id: "1" },
{ message: "two", id: "2" },
{ message: "three", id: "3" }
]
}
},
mounted () {
// this.items[0] = { message:'ximi',id:'4'} //此时对象的值更改了，但是视图没有更新
let art = {message:'ximi',id:"4"}
this.$set(this.items,0,art) //$set 可以触发更新视图
},
}
</script>
