VueJs 强制组件重新加载答案

【问题标题】：VueJs force component to reloadVueJs 强制组件重新加载
【发布时间】：2020-11-17 23:07:28
【问题描述】：

我希望每次对象（我作为道具传输给子组件）发生更改时重新加载子组件。我读到 VueJs 无法检测到对象的变化。到目前为止一切顺利，我想出了以下想法：

每当我的对象发生变化时，我都会对普通变量进行更改，我也会通过道具将其传递给孩子。我的想法是通过更改正常变量来“强制”重新渲染子组件。但它似乎不起作用，我不明白为什么它不起作用。

父文件：

<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>

子文件：

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

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

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

【问题讨论】：

你不能用计算属性来做吗？ vuejs.org/v2/guide/computed.html

标签： javascript vue.js vuejs2 vue-component reload

【解决方案1】：

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

我读到 VueJs 无法检测到对象的变化。

您可能指的是 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()（也称为vm.$set()）添加新属性或使用Vue.delete()（也称为vm.$delete()）删除属性：

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：