直接增加属性
先看直接增加的效果，先给一个对象定义一个属性prop1，然后在页面中增加一个点击按钮并相应该事件，该事件的方法是给对象obj增加属性prop1，看是否成立，如下 ：
<html>
<head>
<title>Vue中给对象添加属性页面不更新 </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<p>对象：{{ obj }}</p>
<button @click="addProp">添加属性</button>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data() {
return {
obj: {
prop1: '属性1'
}
}
},
mounted: function(){
},
methods:{
addProp(){
this.obj.prop2 = "新属性2"
}
},
});
</script>
</body>
</html>不出所料，给对象增加属性后，它是对象的属性是不更新的，为什么呢？
为什么页面不更新
因为在Vue中是通过 Object.defineProperty() 实现的双向数据绑定，该函数是可以给一个对象增加或修改属性的，当页面渲染完成后，不会再调用该函数，所以上面的例子中prop2不会增加到对象的属性中。
下面的例子是vue中双向绑定的原理
<script>
let age = 18
let person = {
name:'张三',
gender:'男'
}
// 给person对象增加age属性，并使用get和set方法
Object.defineProperty(person,'age',{
get(){
return age
},
set(value){
age=value
}
})
console.log(person)
console.log(person.age)
console.log("修改age的值为20");
age = 20//修改age的值
console.log("对象变为：" + person.age);
console.log("修改对象的age值为22");
person.age = 22//修改对象的age值
console.log("变量变为：" + age);
</script>如何实现刷新效果
一般的，不推荐在方法中给对象添加属性，因为这样编程不符合规范，vue官方也不建议这样去做。
如果非要这样去做的话可以通过如下3种方法实现：
- Vue.set(object,key,val)
- this.$set(this.obj,key,val)
- Object.assign({}，this.obj)
例子：
<html>
<head>
<title>Vue中给对象添加属性页面不更新解决方法 </title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.0/vue.min.js">
</script>
</head>
<body>
<div id = "intro" style = "text-align:center;">
<p>对象：{{ obj }}</p>
<button @click="addProp">添加属性</button>
</div>
<script type = "text/javascript">
var vue_det = new Vue({
el: '#intro',
data() {
return {
obj: {
prop1: '属性1'
}
}
},
mounted: function(){
},
methods:{
addProp(){
Vue.set(this.obj,'prop2','新属性2')//方法1
this.$set(this.obj,'prop3','新属性3')//方法2
this.obj = Object.assign({},this.obj,{'prop4':'新属性4'})//方法3
}
},
});
</script>
</body>
</html>