Содержание цикла

1. Article 1
2. Article 2

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

<script setup>
import { ref, computed } from 'vue'

const user = ref({
  firstname: 'Иван',
  lastname: 'Петров'
})

const fullname = computed(() => {
  return user.value.firstname + ' ' + user.value.lastname
})
</script>

<template>
  <div>Уважаемый, {{ fullname }}</div>
</template>

Функция computed() ожидает, что в нее будет передана анонимная функция, которая вернет вычисляемый значение. Также как и с обычными ref(), мы имеем доступ к значению через .value. Вычисляемые ref также авторазвертываются в шаблонах, так что мы можем получать их значения без использования .value.

Вычисляемые свойства vs Методы

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

Запись вычисляемых свойств

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

<script setup>
import { ref, computed } from 'vue'

const user = ref({
  firstname: 'Иван',
  lastname: 'Петров'
})

const newUser = ref({
  firstname: 'Петр',
  lastname: 'Сидоров'
})

const fullname = computed({
    get() {
      return user.value.firstname + ' ' + user.value.lastname
    },
    set(newUser) {
      user.value.firstname = newUser.value.firstname
      user.value.lastname = newUser.value.lastname
    }
})

fullname.value = newUser
</script>

<template>
  <div>Уважаемый, {{ fullname }}</div>
</template>

На экран будет выведено «Уважаемый, Петр Сидоров»