Многократный ли вызов вычисляемого свойства из метода Vue влияет на производительность?

Question

У меня проблема со структурированием моего кода, написанного на Vue, в отношении вычисляемых свойств и производительности. Я хотел бы использовать вычисляемые свойства - чтобы не нарушать правило СУХОГО - но я боюсь, что это может повлиять на производительность.

Мне нужно решить проблему с пользовательским интерфейсом, и это во многом связано с высотой 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 везде.