Vue 2 反应性：计算属性不会触发 DOM 更新

Question

我有一个基于一些嵌套对象属性的计算属性。当对象发生更改时，计算的属性似乎会更新（在 vue-dev-tools 中），但更改不会反映在 UI 中。我知道嵌套对象的反应性，但我从来没有 change/assign 我的 order 对象的嵌套属性，它唯一的变化是在 updateOrder() 中（分配根级别的对象。

我的 UI 没有更新是什么原因？开发工具是否同步到与 UI 相同的状态？我是否遗漏了有关 Vue 反应系统的一些信息？

这里是一些非常简化的代码：


<template>
  <my-component
    @order-changed="updateOrder"
  />
  <div v-if="isOrderComplete">
    Your order is complete  // this never shows until I refresh page
  </div>
  <div v-else>
    Please Submit the order  // this shows at first
  </div>
</template>


export default {
  props: function(){
    initialOrder: Object,
  },
  data: function(){
    order: this.initialOrder
  },
  methods: {
    updateOrder: function(newOrder){  // gets triggered by a child component
      this.order = newOrder;
    }
  },
  computed: {
    isOrderComplete: function(){  // starts as false, becomes true later, seems to be updated in dev-tools
      return this.order.foo || this.order.bar
    }
  }
}

Answer 1

嵌套对象不会自动更新计算属性，您可以在Watch 属性.

中观察变化

 watch: {
    'order.foo'(newValue) {
      // * If any changes happed, this will be triggered !
    }
  }

Answer 2

TLDR：确保控制台中没有任何 javascript 错误

我无法在孤立的代码笔中重现错误。所以我想还有别的事情发生了。由于更新订单的副作用，我抛出了一些错误。它们似乎无关，但一旦我修复了所有错误，错误就消失了。我认为错误 short-circuited Vue 生命周期，即使该错误与我计算的属性.

无关

Vue 2 反应性：计算属性不会触发 DOM 更新

Vue 2 Reactivity: computed property doesn't trigger DOM update

javascript

vue.js

vuejs2

Vue 2 反应性：计算 属性 不会触发 DOM 更新

Vue 2 Reactivity: computed property doesn't trigger DOM update

javascript

vue.js

vuejs2

Vue 2 反应性：计算属性不会触发 DOM 更新