从 Vue 方法内部多次调用 computed 属性是否影响性能？

Question

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

我需要解决一个 UI 问题，它主要与 div 身高有关。所以我通过访问 $refs:

来获取高度值

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

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

基本上我现在有三个选择。看看这个片段，看看我的意思： CodePen.

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

Answer 1

首先，我想提一下，无论您最终使用哪种方法，都不太可能产生显着的性能提升。如果性能是您最关心的问题，那么您应该分析您的网页以确定哪种方法最有效。大多数时候我更喜欢代码 readability/maintainability 而不是性能。

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。此解决方案不适合这种情况，因为计算属性通常在属性依赖于该组件的其他可观察数据属性（Vue 无法观察到 this.$refs.divRef.clientHeight）时使用。

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.
  }
}

除了您在每个方法中多次访问 this.divHeight 之外，这与 #2 相同。唯一超过 #2 的 "improvement" 是避免属性访问，这是可以忽略不计的；但是如果你在一个方法中使用 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 方法内部多次调用 computed 属性是否影响性能？

Is calling computed property from inside Vue method multiple times affecting the performance?

performance

structure

vue.js

computed-properties

从 Vue 方法内部多次调用 computed 属性 是否影响性能？

Is calling computed property from inside Vue method multiple times affecting the performance?

performance

structure

vue.js

computed-properties

从 Vue 方法内部多次调用 computed 属性是否影响性能？