Vue 不会在生产模式下更新由 API 调用加载的组件属性，但在开发模式下会更新

Question

我有一个包装器组件，它提供 children 和 API 调用并存储结果，还有一个列表组件，它显示通过 prop 传递的请求项目。问题是它在开发模式下显示它们，但在生产模式下不显示它们，尽管 API 在两种情况下调用都正常并且响应正确。

两种模式我运行在同一环境中。看起来像是反应性问题。

这是模板代码：

<vue-api>
  <vue-list-filter-synchronizer slot-scope="{ result, getPrograms }"
                                ...
                                @params-updated="getPrograms">
     ...
     <div class="content">
        <vue-list :items="result ? result.data : []"
                  .../>
     </div>
  </vue-list-filter-synchronizer>
</vue-api>

VueAPI 组件：

const VueAPI = {
  data() {
    return {
      result: null,
      error: null,
      loading: false
    }
  },
  ...
  methods: {
    getPrograms(params) {
      this.query(services.getPrograms)([params]);
    },
    query(f) {
      return (args=[]) => {
        if (!this.loading) {
          this.loading = true;
          f(...args)
            .then(({ data }) => this.result = data)
            .catch(error => this.error = error)
            .finally(() => this.loading = false);
      }
    }
  },
  render() {
    return this.$scopedSlots.default(this.slotScope);
  }
}

我希望 VueAPI 组件中的 result.data 将在开发和生产模式下显示为列表项，但仅在开发模式下如此。

Answer 1

首先，我的 vue.debug.js 有一个旧版本，因此它可以与旧版本一起使用，但不能没有。当我更新它时，问题也出现在调试模式下。其次，问题是我对 slot-scope 使用了过时的语法。当我将其更改为 v-slot 语法时，一切都开始按预期工作。

Vue 不会在生产模式下更新由 API 调用加载的组件属性，但在开发模式下会更新

Vue doesn't update component prop loaded by API call in production mode but does in development

javascript

mode

vue.js

vue-reactivity