2017-12-18 148 views
2

的文檔Reactivity in Depth解釋了爲什麼增加新的根級別的反應特性,以一個已經創建的實例是不可能的(以及如何實際上是通過this.$set()添加的話)。爲什麼有可能有在安裝中添加活性元素?

在這種情況下,爲什麼初始爲空的對象可以在安裝時被更新(和反應性),則該實例後intialized?或者不初始化部分包括安裝? (雖然它可能mount an instance manually的initalization後)安裝後

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.myobject = { 
 
     "x": 1 
 
     } 
 
    }, 2000) 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

直接進一步的修改不與文檔(this.myobject.y = 2例如是行不通的,同時考慮到,在線路this.$set(this.myobject, "y", 2)將被罰款)

回答

1

您的示例中的代碼不屬於更改檢測警告,因爲您沒有將屬性添加到myobject您正在設置myobject完全新的對象。 Vue沒有問題檢測對象引用的變化。

什麼Vue公司無法檢測是增加一個屬性是不存在的對象。例如,如果你這樣做:

mounted() { 
    setTimeout(() => { 
    this.myobject.someNewProperty = "some value" 
    }, 2000) 
} 

Vue不會檢測到變化。以下是您的示例更新,以演示在對象更改後DOM永遠不會更改。

new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.myobject.someNewProperty = "some value" 
 
    }, 2000) 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

當它說

Vue公司不會動態允許添加新的根級反應 屬性已創建的實例什麼文件指。

是否在創建Vue實例後無法將其他屬性添加到數據對象。例如,這代碼:

var vm = new Vue({ 
 
    el: "#app", 
 
    data: { 
 
    myobject: {} 
 
    }, 
 
    mounted() { 
 
    setTimeout(() => { 
 
     this.$set(vm.$data, 'newRootLevelProperty', "some value") 
 
    }, 2000) 
 
    } 
 
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.11/vue.js"></script> 
 
<div id="app"> 
 
    {{myobject}} 
 
</div>

結果在警告

[Vue的警告]:避免添加反應性特性在運行時的Vue實例或其 根$數據 - 在數據選項中聲明它。

但是你可以嵌套對象(如myobject只要您使用$設置添加屬性。

相關問題