Question

关于计算属性和性能，我在构造用Vue编写的代码时遇到问题。我想使用计算属性-不违反DRY规则-但我担心它会影响性能。

我需要解决一个UI问题，它很大程度上与div高度有关。因此，我通过添加$ refs来获取高度值：

var divHeight = this.$refs.divRef.clientHeight;

然后我必须在组件方法中多次使用divHeight。

基本上，我现在有三个选择。查看此代码片段，了解我的意思： CodePen。

解决此问题的最佳方法是什么？

Answer 1

首先，我想提到的是，无论最终使用哪种方法，都不太可能显着提高性能。如果您最关注性能，则应该对网页进行分析，以确定哪种方法最有效。在大多数情况下，我会优先考虑代码的可读性/可维护性而不是性能。

1。没有计算所得的属性，请在每个方法中分别声明divHeight。

methods: {
  firstMethod() {
    var divHeight = this.$refs.divRef.clientHeight;
    ...
  },

  secondMethod() {
    var divHeight = this.$refs.divRef.clientHeight;
    ...
  }
}

如果div的高度可以更改，这是可取的，因此您确实想在每次调用方法时都获取正确的高度，以防更改高度。

2。设置divHeight计算属性，无论如何都将其声明为方法内部的变量。

computed: {
  divHeight() {
    return this.$refs.divRef.clientHeight;
  }
},

methods: {
  firstMethod() {
    var divHeight = this.divHeight;
    ...
  },

  secondMethod() {
    var divHeight = this.divHeight;
    ...
  }
}

divHeight仅在第一次访问该属性时计算一次。如果div的高度发生变化，则divHeight将不会重新计算。此解决方案不适合这种情况，因为通常在该属性依赖于该组件的其他可观察数据属性时使用计算属性（this.$refs.divRef.clientHeight无法被Vue观察）。

3。设为divHeight计算属性，在方法中多次使用this.divHeight。

computed: {
  divHeight() {
    return this.$refs.divRef.clientHeight;
  }
},

methods: {
  firstMethod() {
    this.divHeight/this.divWidth = something;
    this.divHeight... other operations.
  },

  secondMethod() {
    this.divHeight/this.divWidth = something;
    this.divHeight... other operations.
  }
}

与＃2相同，不同之处在于您在每种方法中多次访问this.divHeight。＃2唯一的“改进”是避免对属性的访问，这可以忽略不计。但是如果您在方法中使用this.divHeight 很多次，那么最好使用＃2，以避免到处都有this.。

我建议改为：

methods: {
  divHeight() {
    return this.$refs.divRef.clientHeight;
  },

  firstMethod() {
    var divHeight = this.divHeight();
    ...
  },

  secondMethod() {
    var divHeight = this.divHeight();
    ...
  }
}

这与＃1基本相同，只是它稍短一些，因为您不必在任何地方键入this.$refs.divRef.clientHeight。

从Vue方法内部多次调用计算属性会影响性能吗？

1 个答案: