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

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

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

确保去除调整大小事件。此外，您应该真正考虑在没有Javascript的情况下完成此任务。

Answer 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;
    ...

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

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

2 个答案: