Vue.js - 重新计算组件中的计算属性答案

【问题标题】：Vue.js - Recompute computed property in a componentVue.js - 重新计算组件中的计算属性
【发布时间】：2018-07-11 01:01:32
【问题描述】：

我搜索了很多这个问题，但没有找到直接的答案。我有一个计算属性，它也取决于窗口高度，所以每次调整窗口大小时我都需要重新计算它。尝试使用$forceUpdate()，但我认为它不适用于组件。这是我的组件：

Vue.component('trades-component', {

  mixins: [tradingMixin],

  created: function() {
    var that = this;
    // recompute visible trades if window resized
    $( window ).on( "resize", function() {
      that.$forceUpdate();
    });
    $( window ).resize();
  },

  computed: {

    visibleTradesCount: function() {
      var colOffset = $(".left-col").offset();
      var colHeight = $(".left-col").height();
      var tableOffset = $(".left-col #trade-history table").offset();
      var tableHeight = colHeight - (tableOffset.top - colOffset.top) - this.rowHeight;
      return Math.floor(tableHeight / this.rowHeight)
    }
  }
})

我知道可能的解决方法，但想知道是否有办法强制重新计算组件中的特定属性或所有计算属性。

【问题讨论】：

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

您不能为此使用计算属性，因为您没有更新 Vue 正在观察的任何内容。您可以将 visibleTradesCount 从 computed 移动到 methods 并执行以下操作：

$(window).on('resize', this.visibleTradesCount).resize()

只需确保消除调整大小事件的抖动。此外，您应该真正考虑在没有 JavaScript 的情况下完成此操作。

【讨论】：

建议：有一个由去抖动函数更新的窗口大小数据项。然后计算和其他任何东西都可以依赖于此。
如果计算值仅取决于事件而不取决于 Vue 观察到的其他属性的变化，那么您的解决方案 Bill 将是完美的。另一方面，我发现@Roy J 评论正是我想要的。一个绝妙的主意！如果这是一个答案而不是评论，我肯定会将其标记为已接受的答案
“不使用 JavaScript 完成”是什么意思？你可能想写“在没有 jQuery 的情况下完成这个”？

【解决方案2】：

这不像@BillCriswell 的回答那样干净，但是如果您的计算具有触发刷新的其他依赖项（例如数据更改），您可能希望坚持使用计算。

您可以通过使用窗口宽度和高度的数据属性并在您的计算属性中添加对它们的引用来强制重新计算调整大小。

data: function () {
  return { 
    windowWidth: 0,
    windowHeight: 0
  }
}
created: function() {
  var that = this;
  $( window ).on( "resize", function() {
    that.windowWidth =  window.innerWidth;
    that.windowHeight = window.innerHeight;
  });
  $( window ).resize();
},
computed: {
  visibleTradesCount: function() {
    const x = this.windowWidth;
    const y = this.windowHeight;
    ...

注意，您可能需要在beforeDestroy() 中输入$(window).off("resize"。

【讨论】：

拥有一个在窗口调整大小时更新的属性并使计算值依赖于它是我找到的最佳答案。谢谢！