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

Question

我对这个问题进行了很多搜索，但没有找到直接的答案。我有一个计算属性，它也取决于窗口高度，因此每次调整窗口大小时我都需要重新计算它。尝试过使用$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)
    }
  }
})

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

Answer 1

这不像@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;
    ...

请注意，您可能需要$(window).off("resize"在beforeDestroy().