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"这种写法，之前一直没注意到。