Vue Apollo - 收到查询数据后响应的最佳实践

Question

我的应用程序中有一个表格组件，我希望根据计算（窗口高度 - （menuHeight + footerHeight）自动调整其高度。menuHeight 是我的 apollo 缓存中的本地数据，需要在内部接收查询我的表格组件。这个计算需要在 2 种情况下运行：

1. 收到阿波罗数据时
2. 任何时候窗口高度发生变化

我需要帮助确定满足两者的最佳方法。计算属性满足第一个但不会随着窗口高度变化（img 1）而更新，并且使用方法和事件侦听器（img 2）更新适用于第二种情况，但我不知道一旦阿波罗数据是如何运行它收到或更改，因为我不能只在 mount 或 beforeUpdate 生命周期中运行该方法。

Answer 1

您可以使用watch (see the Vue docs here)：

watch: {
  ui(newValue, oldValue) {
    resizeTableHeight() // or whatever...
  }
}