为什么有可能有在安装中添加活性元素？

  • Z时代
  • 2024-01-10
  • 分类：问答

的文档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)将被罚款）

回答：

您的示例中的代码不属于更改检测警告，因为您没有将属性添加到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）只要您使用$设置添加属性。

以上是 为什么有可能有在安装中添加活性元素？ 的全部内容， 来源链接： utcz.com/qa/263486.html

回到顶部