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"這種寫法，之前一直沒注意到。