2017-12-18 238 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只要您使用$设置添加属性。

相关问题