VueJs强制组件重新加载

Question

我希望 child 组件在我作为道具传输到 child 的 object 每次发生变化时重新加载。我读到 VueJs 无法检测 Object 中的变化。到目前为止一切顺利，我想出了以下想法：

每次我的 Object 发生变化时，我都会对一个普通变量进行更改，我也会通过一个道具将其传输到 child。我的想法是通过更改普通变量来“强制”重新渲染 child 组件。但是好像不行，我不明白为什么不行。

Parent 文件：

<template>
<compare-value :ocean="ocean" :update="updateComponent" v-if="ocean.length > 0"></compare-value>
</template>

<script>
import CompareValue from '@/views/compare/CompareValue'
...
components: { 
  CompareValue
},
...
updateComponent: 0,
...
  
methods: {
  reloadCompnent() {
      this.updateComponent += 1;
  },

 getData() {
   this.ocean.push({
     userid: userId,
     data1: this.result.data_john, 
     data2: this.result.data_mike, 
     data3: this.result.data_meika, 
     data4: this.result.data_slivina,
   })
   this.reloadCompnent() //Force the reload of the component
 }
}
</script>

Child 文件：

 <template>
   {{ update }}
 </template>

 <script>
 ...
   props: [
     'ocean',
     'update'
   ],
  ...
  </script>

据我了解，普通变量的更改会触发组件重新加载，但似乎我在监督某些事情。

Answer 1

设置一个 existing Object 道具实际上是反应性的，向数组道具添加一个新对象也是如此。在您的示例中，getData() 会导致 compare-value 重新呈现而无需调用 reloadComponent() (demo).

I read that VueJs can not detect a change in an Object.

您可能指的是 Vue 2 的 change-detection caveats for objects，它调用对象属性的 addition 或 deletion .

注意示例：

export default {
  data: () => ({
    myObj: {
      foo: 1
    }
  }),
  mounted() {
    this.myObj.foo = 2    // reactive
    delete this.myObj.foo // deletion NOT reactive
    this.myObj.bar = 2    // addition NOT reactive
  }
}

但是Vue提供了一种解决方法，使用Vue.set() (also vm.$set()) to add a new property or Vue.delete() (also vm.$delete())删除一个属性:

export default {
  //...
  mounted() {
    this.$delete(this.myObj, 'foo') // reactive
    this.$set(this.myObj, 'bar', 2) // reactive
  }
}

Answer 2

感谢您的回答，我测试了您建议的答案，我本来可以工作，但我做了其他事情。我只是用 :key 替换了 :update 并且它起作用了。此操作后，组件将自动重新加载。

该解决方案看起来与我在问题中发布的解决方案完全一样，只是一个（重要的）小东西有所不同。见下文。

<template>
<compare-value :ocean="ocean" :key="updateComponent" v-if="ocean.length > 0"></compare-value>
</template>

谢谢，希望对其他人也有帮助。

Br

VueJs强制组件重新加载

VueJs force component to reload

javascript

vue.js

vuejs2

vue-component

reload