vue data对象添加新属性触发视图

<template>
<div class="wrap open">
<a>{{test01.name}}</a>
　　　　　<a>{{test00}}</a>
</div>
</template>
<script>
export default {
data(){
return {

test01:{
sex:"boy"
}

}
}
ready(){
　　　　　//this.test00=2222不起作用
　　　　　this.$set("test00",2222)//test00:2222  ok

　　　　　//this.test01.name=1222;不起作用，因为test的name为新添加的属性，不能响应
this.$set('test01.name',1222);//test01:{sex:"boy",name:1222}  ok

}
}
</script>

如果直接使用this.test.name=1222不会起作用，因为受 ES5 的限制，Vue.js 不能检测到对象属性的添加或删除。因为 Vue.js 在初始化实例时将属性转为 getter/setter，所以属性必须在

data

对象上才能让 Vue.js 转换它，才能让它是响应的。

不过，有办法在实例创建之后添加属性并且让它是响应的。

对于 Vue 实例，可以使用

$set(key, value)

实例方法。

key也支持"test01.name"这种写法，之前一直没注意到。