Вычисляемые свойства в Vue

Vue — один из самых удобных фреймворков для фронтенда, в том числе благодаря своей реактивности. Один из ключевых инструментов этой реактивности — вычисляемые свойства, или computed.

Вычисляемые свойства (computed)

computed — это значение, которое зависит от других реактивных данных и автоматически обновляется, если эти данные изменяются.

Но важная особенность — Vue кеширует результат computed, если его зависимости не изменились. Это делает computed отличным выбором для производительных интерфейсов.

✨ Простой пример (Options API)

export default {

data() {

return {

count: 2

};

},

computed: {

doubleCount() {

return this.count * 2;

}

}

};

computed vs methods

• computed запоминает результат, если зависимости не менялись.

• • methods пересчитывается каждый раз при вызове.

Пример:

methods: {

getDouble() {

console.log('method called');

return this.count * 2;

}

},

computed: {

doubleCount() {

console.log('computed called');

return this.count * 2;

}

}

Если ты вызовешь их в шаблоне:

<p>{{ doubleCount }}</p>

<p>{{ getDouble() }}</p>

То:

• computed вызовется один раз, пока count не изменится.
• method будет вызываться при каждом рендере.

🔧 Когда использовать:

• computed — если нужно получать значение на основе реактивных данных.

• • methods — если ты просто хочешь выполнить действие (например, по клику).

Путаница с watch

Ещё одна ловушка — путаница между computed и watch.

computed

watch

🔁 Автоматически пересчитывает

✅ Да

❌ Нет (нужно задать реактивную цель)

🧮 Возвращает значение

✅ Да

❌ Нет (предназначен для побочных эффектов)

🧨 Подходит для

Вывода в шаблон

API-запросов, localStorage, логов и т.п.

Пример: watch реагирует на изменение и делает действие

watch(count, (newVal) => {

console.log('count изменился на', newVal);

});

🧪 Composition API и computed

В Composition API computed — это функция, которую ты импортируешь из vue:

import { ref, computed } from 'vue';

export default {

setup() {

const count = ref(2);

const double = computed(() => count.value * 2);

return { count, double };

}

}

И ты получаешь результат как .value:

<p>{{ double }}</p> <!-- Vue сам развернёт .value -->

Важное отличие:

• • В Composition API нужно использовать .value внутри логики, но в шаблоне это не требуется — Vue сам подставит.

Fundamentals with the Composition API

computed computed properties, lets us perform transformations
or calculations based on our data. is import a computed function from vue. Just like ref, computed
is a helper function provided by vue that helps us interact
with its reactivity system. we need to return
our reversed array of items. It's very important to actually return
a value from a computed property. Otherwise, Vue won't know
what the value should be. That's not what we want. Remember that computed properties
are only for transforming data for our presentation layer. They should not alter
or change the existing data.

Vue.js 3 Fundamentals with the Options API

As we type our newItem, we can see our character count
in real-time. While this example is a little basic, computed properties
are extremely powerful tools for encapsulating data
transformations and manipulations, that stay synched
with the data that they reference. So, let's try using a computed
property to flip our items,