使用VueJS更新对象中的多个道具时如何诱发反应性?

问题描述 投票:0回答:1

[我在构建我的应用程序时看到一些奇怪的行为,其中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.js vue-component vuex
1个回答
0
投票

原因是性能-如果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>
© www.soinside.com 2019 - 2024. All rights reserved.