从 Vue 方法内部多次调用计算属性是否会影响性能？答案

【问题标题】：Is calling computed property from inside Vue method multiple times affecting the performance?从 Vue 方法内部多次调用计算属性是否会影响性能？
【发布时间】：2019-10-01 05:37:17
【问题描述】：

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

我需要解决一个 UI 问题，它主要与 div 高度有关。所以我通过访问 $refs 来获取高度值：

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

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

基本上我现在有三个选择。看看这个 sn-p 看看我的意思： CodePen.

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

【问题讨论】：

另外请注意，我有多个属性，例如 divHeight 并将它们声明为函数范围之外的计算属性可将代码长度减少约 25%，因此这是一个巨大的可读性改进。

标签： performance vue.js structure computed-properties

【解决方案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。

【讨论】：