[我在构建我的应用程序时看到一些奇怪的行为,其中dom的一部分对输入没有正确反应。突变正在注册,状态正在改变,但DOM中的属性却没有。我注意到当我返回时,在html中编辑了一个新的空白行,然后返回,它现在正在显示新的道具。但是我必须编辑,保存文档,然后返回以查看状态的任何新更改。
所以状态正在更新,但是Vue对更改没有反应。这就是我想为什么的原因:https://vuejs.org/v2/guide/reactivity.html#For-Objects
Vue cannot detect property addition or deletion. Since Vue performs the getter/setter conversion process during instance initialization, a property must be present in the data object in order for Vue to convert it and make it reactive. For example:
Sometimes you may want to assign a number of properties to an existing object, for example using Object.assign() or _.extend(). However, new properties added to the object will not trigger changes. In such cases, create a fresh object with properties from both the original object and the mixin object:
处于我状态的对象是js-libp2p的实例。每当libp2p实例执行某项操作时,我都需要定期更新处于状态的对象。我通过执行突变来做到这一点
syncNode(state, libp2p) {
state.p2pNode = libp2p
}
其中libp2p是对象的当前实例,我正在尝试通过更改state.p2pNode使DOM做出反应。我不能使用$set
进行单值编辑,并且我认为.assign
或.extend
都将无法工作,因为我正尝试替换整个对象树。
为什么会有此限制,并且有针对此特定问题的解决方案?
原因是性能-如果Vue神奇地处理了深度反应性,则Vue的性能会更差,并且可能会出现循环对象问题。幸运的是,据说Vue 3的新编译器将能够更轻松地处理此问题。在此之前,我们一直坚持他们的建议,即每次都制作一个新对象。实际上,由于使用Object.assign,这应该不会造成太大麻烦-但是,如果您有一个可重现的示例,但该示例不起作用(理想情况下是可运行的代码段或codepen),请随时更新问题。
var app = new Vue({
el: "#app",
data() {
return { foo: { person: { firstName: "Evan" } } };
},
methods: {
syncData() {
this.foo = Object.assign({}, this.foo, {
person: { firstName: "Alex" }
});
}
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
Hello {{foo.person.firstName}}!
<button @click="syncData">Load new data</button>
</div>