时间戳

首页 > 解决方案 > 从 Vue 方法内部多次调用计算属性是否会影响性能？

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

问题描述

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

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

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

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

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

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

标签： performancevue.jsstructurecomputed-properties

解决方案

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

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.clientHeightVue 不可观察）。

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任何地方输入。

推荐阅读