VueJS - Вычисляемые свойства: Пособие для начинающих

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

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

Представьте, что вы пекете蛋糕. У вас есть ингредиенты (данные), и вы следуете рецепту (логике), чтобы создать что-то вкусное (вычисляемое свойство). В Vue.js вычисляемые свойства resemble магические рецепты, которые автоматически обновляются, когда их ингредиенты изменяются!

Давайте начнем с простого примера:

<template>
<div>
<p>Имя: {{ firstName }}</p>
<p>Фамилия: {{ lastName }}</p>
<p> FullName: {{ fullName }}</p>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName() {
return this.firstName + ' ' + this.lastName
}
}
}
</script>

В этом примере fullName是我们的 вычисляемое свойство. Это как умный рецепт, который combine firstName и lastName, чтобы дать нам полное имя. Лучше того? Когдаsoever firstName или lastName изменяются, fullName обновляется автоматически!

Why Use Computed Properties?

1. Простота: Они поддерживают ваш шаблон чистым и легким для чтения.
2. Производительность: Vue кэширует результат и перерассчитывает только при изменении зависимостей.
3. Надежность: Они обновляются автоматически, когда их зависимости изменяются.

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

"Но подожди," - можете вы сказать, - "неужели мы не можем просто использовать метод?" Отличный вопрос! Давайте сравним:

<template>
<div>
<p>Вычисляемое: {{ reversedMessage }}</p>
<p>Метод: {{ reverseMessage() }}</p>
</div>
</template>

<script>
export default {
data() {
return {
message: 'Hello, Vue!'
}
},
computed: {
reversedMessage() {
return this.message.split('').reverse().join('')
}
},
methods: {
reverseMessage() {
return this.message.split('').reverse().join('')
}
}
}
</script>

Both reversedMessage и reverseMessage() делают одно и то же. Но вот secret sauce: вычисляемые свойства кэшируются. Если message не изменяется, reversedMessage не будет пересчитываться. Это как иметь super-efficient assistant, который запоминает предыдущие результаты!

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

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

<template>
<div>
<input v-model="searchQuery" placeholder="Search todos">
<ul>
<li v-for="todo in filteredTodos" :key="todo.id">{{ todo.text }}</li>
</ul>
</div>
</template>

<script>
export default {
data() {
return {
searchQuery: '',
todos: [
{ id: 1, text: 'Learn Vue', completed: false },
{ id: 2, text: 'Build an app', completed: true },
{ id: 3, text: 'Master computed properties', completed: false }
]
}
},
computed: {
filteredTodos() {
return this.todos.filter(todo =>
todo.text.toLowerCase().includes(this.searchQuery.toLowerCase())
)
}
}
}
</script>

Здесь filteredTodos resembles smart filter. Он отслеживает как todos, так и searchQuery. Когда что-то из них изменяется, он обновляет список автоматически. Волшебно, правда?

Get/Set в вычисляемых свойствах

Теперь давайте поднимемся на новый уровень! Вычисляемые свойства могут иметь как getter, так и setter. Это как иметь двухсторонний рецепт – вы можете читать результат и изменять ингредиенты!

<template>
<div>
<p> FullName: {{ fullName }}</p>
<button @click="changeFullName">Change Name</button>
</div>
</template>

<script>
export default {
data() {
return {
firstName: 'John',
lastName: 'Doe'
}
},
computed: {
fullName: {
get() {
return this.firstName + ' ' + this.lastName
},
set(newValue) {
const names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
},
methods: {
changeFullName() {
this.fullName = 'Jane Smith'
}
}
}
</script>

В этом примере fullName не просто рецепт (getter), но и обратный рецепт (setter). Когда мы изменяем fullName, он автоматически обновляет firstName и lastName. Это как иметь magical name-changing potion!

Методы вычисляемых свойств

Давайте подведем итог с таблицей.common methods, которые можно использовать в вычисляемых свойствах:

Метод	Описание	Пример
filter()	Создает новый массив с элементами, которые проходят тест	this.items.filter(item => item.price > 100)
map()	Создает новый массив, преобразовывая каждый элемент	this.items.map(item => item.name.toUpperCase())
reduce()	Приводит массив к одному значению	this.items.reduce((total, item) => total + item.price, 0)
sort()	Сортирует элементы массива	this.items.sort((a, b) => a.price - b.price)
includes()	Проверяет, содержит ли массив определенный элемент	this.items.includes('apple')
find()	Возвращает первый элемент, который проходит тест	this.items.find(item => item.id === 3)

Помните, эти методы не изменяют исходный массив, что идеально подходит для вычисляемых свойств!

И вот оно, моиavid learners! Вы только что овладели искусством вычисляемых свойств в Vue.js. От простых вычислений до сложных фильтраций, теперь у вас есть сила сделать ваши приложения Vue умнее и эффективнее. Продолжайте практиковаться, продолжайте программировать и, самое главное, продолжайте наслаждаться Vue!

Credits: Image by storyset