Вычисляемые свойства Vue.js в деталях

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

Чтобы помочь нам в этом, давайте создадим новое приложение Vue.js.

<div id="app">
  <p> {{ personalInfo }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app = Vue.createApp({
    data: function () {
      return {
        firstName: 'Vue',
        lastName: 'Noob',
        age: 21,
        locality: 'Vueland',
      };
    },
    computed: {
      personalInfo(){
        return `My name is ${this.firstName} ${this.lastName}, I am ${this.age} years old. I am based in ${this.locality}.`;
      }
    }
  }).mount('#app');
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

Реактивность в вычисляемых свойствах

Вычисляемые свойства следят за изменениями во всех своих зависимостях и обновляются соответствующим образом. В приведенном выше примере вычисляемое свойство personalInfo следит за изменениями переменных firstName, lastName, age и locality, и когда оно обнаруживает изменения в любом из их значений, то обновляет себя, чтобы отразить эти изменения.

Попробуйте изменить значения этих переменных, чтобы увидеть результаты.

Кэширование в вычисляемых свойствах

Одной из важных особенностей вычисляемых свойств является кэширование. Это преимущество вычисляемых свойств перед методами, свойством Vue.js, которое будет рассмотрено позже.

Суть кэширования в вычисляемых свойствах Vue.js заключается в том, что когда вычисляемое свойство разрешено, Vue.js кэширует полученное значение, и при новых обращениях к этому вычисляемому свойству возвращается кэшированное значение вместо повторного выполнения выражений внутри вычисляемого свойства. Повторное выполнение содержащегося выражения происходит в случае методов.

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

Недостатки вычисляемых свойств

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

<div id="app">
  <p> {{ personalInfo }} </p>
+ <p> {{ morePersonalInfo }} </p>
+ <p> {{ morePersonalInfoDelayed }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app = Vue.createApp({
    data: function () {
      return {
        firstName: 'vue',
        lastName: 'noob',
        age: 21,
        locality: 'Vueland',
+       time: Date.now(),
+       morePersonalInfoDelayed: ''
      };
    },
    computed: {
      personalInfo(){
        return `My name is ${this.firstName} ${this.lastName}, I am ${this.age} years old. I am based in ${this.locality}.`;
      },
+      morePersonalInfo(){
+       return `I'll be travelling on ${new Date(this.time).toUTCString()}.`;
+     }
    },
+   mounted(){
+     setTimeout(() => {
+       this.morePersonalInfoDelayed = this.morePersonalInfo;
+     }, 5000);
+   }
  }).mount('#app');
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

Функция mounted() в приведенном выше примере — это крючок жизненного цикла, тема которого будет рассмотрена позже.

В нашем примере вы заметите, что оба вычисляемых свойства morePersonalInfo и morePersonalInfoDelayed дают нам одну и ту же строку, несмотря на то, что morePersonalInfoDelayed было разрешено на 5 секунд позже. Именно здесь вычисляемые свойства дают сбой, когда мы имеем дело с нереактивными зависимостями, такими как Date.now() и Math.random().
В таких случаях правильным решением будет использование методов.

Настройка вычисляемых свойств

Вычисляемые свойства по своей природе являются только getter-only, то есть мы ожидаем получить от них только значения и не должны присваивать им значения.
Изменять или присваивать значения вычисляемым свойствам бесполезно, поскольку значение, полученное от них, является временным снимком состояния и может быть изменено при изменении зависимостей, а мы нацелены на то, чтобы использовать их в первую очередь.
Кроме того, попытка сделать это вызовет предупреждение во время выполнения.

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

Обратите внимание на следующий пример.

<div id="app2">
  <p> {{ priceOfAnItem }} </p>
</div>

<script src="https://unpkg.com/vue@3"></script>
<script>
  let app2 = Vue.createApp({
    data: function () {
      return {
        item: 'Apple',
        price: '2'
      };
    },
    computed: {
      priceOfAnItem: {
        get(){
          return `One ${this.item} costs ${this.price} dollars`;
        },
        set(resolvedVal){
          [,this.item,,this.price,] = resolvedVal.split(' ');
        }
      }
    },
    mounted(){
      setTimeout(() => {
        this.priceOfAnItem = `One Orange costs 5 dollars`;
      }, 3000);
    }
  }).mount('#app2');
</script>
Вход в полноэкранный режим Выход из полноэкранного режима

Если вы выполните приведенный выше пример, то увидите, что через 3 секунды значения товара и цены изменились на "Orange" и 5 соответственно. Это произошло после того, как мы обновили значение вычисляемого свойства с помощью сеттера.

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

Рекомендуется использовать функции getter только для выполнения чистых вычислений и избегать действий, создающих побочные эффекты, таких как вызов функций и изменение DOM, такая логика создания побочных эффектов может быть выполнена внутри Vue.js watchers.

Исходный код примеров в этом посте находится в этом файле.

Оцените статью
devanswers.ru
Добавить комментарий