VueJS 在 EventBus 接收到新数据后重新渲染组件答案

【问题标题】：VueJS re-render component after EventBus receives new dataVueJS 在 EventBus 接收到新数据后重新渲染组件
【发布时间】：2020-06-03 19:01:00
【问题描述】：

每次事件总线接收到新数据时都会调用计算函数。如何重新渲染组件，以便显示新数据？

<template lang="pug">
  div
    div(v-for='user in filtered')
      p {{ user.name }}
</template>

<script>
  computed: {
    filtered() {
      // filter by using data
      return this.users.filter((user) =>
        return this.data.includes(user.name)
      );
    }
  },
  created() {
    EventBus.$on('data', (data) => {
      this.data = data;
    }
  },
  data() {
    return {
      data: [],
      users: [
        // users
      ]
    }
  }
</script>

【问题讨论】：

能分享一下监听总线的代码吗？
我认为在计算属性中，您应该依赖反应性道具或数据，否则您将看不到组件渲染的任何变化。
用户是如何从数据中计算出来的？您是否记录了从事件总线收到的数据？
@Baboo_事件总线正常工作，当接收到新数据时，触发计算但不重新渲染UI

标签： javascript vue.js vue-component pug

【解决方案1】：

检测是否需要渲染，Vue checks references of objects and arrays，而不是它们的值或属性。

我怀疑从事件总线传递的data 数组与组件中的数组相同。

使用扩展运算符创建一个新数组并触发重新渲染：

created() {
  EventBus.$on('data', (data) => {
    this.data = [...data];
  }
},

【讨论】：

不幸的是，这并不能解决问题。这意味着 Vue 应该自动检测值何时发生变化，并且我不需要模板中的扩展来重新加载数据吗？
数据不是模板中显示的数据。我使用事件总线提供的数据来过滤用户。
我已经认识到问题所在。事件总线返回一个观察者对象，当然不能这样处理，因为我希望在过滤期间有一个数字数组。所以我只需要提取数组，一切都很好。