Что именно вычисляет свойства в vuejs?

Question

Есть несколько вопросов, связанных с вычисляемыми свойствами, такими как следующее

1. "Вычисляемое свойство vuejs form"

2. "Вычисляемые свойства в VueJs"

3. "вычисляемое свойство в VueJS"

4. "Использовать вычисляемое свойство в данных в Vuejs"

Они спрашивают о конкретной ошибке или логике.Есть много сайтов, которые рассказывают о концепциях, связанных с vuejs.Я читал о вычисленных свойствах на официальном сайте vuejs.Когда мы делаем сложные вычисления или хотим избежать записи большего количества логики в нашем шаблоне html, тогда мы используем вычисляемые свойства.

Но не удалось получить четкое представление о вычисляемых свойствах, когда он вызывает, как он вызывает, что именно делает?

Answer 1

TL; DR : вычисляемые свойства являются геттерами / сеттерами в Vue.

---

Если они определены в сокращенной форме, они являются геттерами:

computed: {
  someComputed() {
    return `${this.foo} ${this.bar}`;
  }
}

эквивалентно

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
  }
}

, который также может иметь установщик:

computed: {
  someComputed: {
    get: function() {
      return `${this.foo} ${this.bar}`;
    }
    set: function(fooBar) {
      const fooBarArr = fooBar.split(' ');
      this.foo = fooBarArr[0];
      this.bar = fooBarArr[1];
    }
  }
}

---

Короче говоря, вычисляемые свойства Vue позволяют привязать свойство экземпляра к

• a getter : функция запускается при поиске этого свойства;использование:

this.someComputed // returns the computed current value, running the getter.

• a setter : функция запускается при попытке назначить это свойство;использование:

this.someComputed = value; // sets the computed current value, running the setter.

Подробнее о getters и setters в Javascript.

А вот документация по Vue вычисляемым свойствам .

Answer 2

Вы можете использовать вычисляемые свойства, когда, например, у вас есть логика, которая взорвет ваш шаблон.

Идея состоит в том, что обычно вы хотите сохранить всю логику javascript на стороне javascript вашего компонента vue,и только доступ к окончательным данным в ваших данных (если это возможно)

Для этого вы можете использовать вычисленные реквизиты, которые обычно делают простые вещи, такие как:

  computed: {
    // a computed getter
    reversedMessage: function () {
      // `this` points to the vm instance
      return this.message.split('').reverse().join('')
    }
  }

Или другой хороший пример, если выу вас есть некоторая валюта, и вы хотите отформатировать ее с разделителем тысяч и евро в конце.

Затем вы можете получить доступ к своей вычисленной реквизите в шаблоне так же, как к обычной реквизите, вам не нужно называть ее какfunction.

примерно так:

<div>{{reversedMesage}}</div>

Каждый раз, когда меняется любая переменная, используемая в вашем расчетном реквизите, vue vill позаботится об этом и пересчитает ваше вычисленное свойствоснова.

Допустим, у вас есть следующее:

  computed: {
    prettyAmount: function () {
      return this.amount + ' ' + this.currency.toUpperCase()
    }
  }

<div>{{prettyAmount}}</div>

Всякий раз, когда меняется валюта или сумма, вывод prettyAmount будет изменятьсятакже.