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

В данной статье мы познакомимся с вычисляемыми свойствами, которые помогут вам освоить фреймворк Vue JS.
Прежде чем начать
Данная статья предназначена для разработчиков, использующих Vue JS и знакомых с процессом установки фреймворка и его основных компонентов.
Нам понадобится:
- Установленный Node.js 10.x и выше. Проверить версию фреймворка можно, запустив команду node-v в командной строке.
- Установленный Node Package Manager 6.7 или выше (NPM).
- Редактор кода: рекомендуется Visual Studio Code.
- Установленная актуальная версия Vue.
- Установленный Vue CLI 3.0.
Но сначала удалите старую версию CLI с помощью следующей команды:
npm uninstall -g vue-cli
Затем установите новую версию:
npm install -g @vue/cli
Или:
- Загрузите стартовый проект Vue здесь.
- Распакуйте загруженный проект.
- Запустите команду для обновления всех зависимостей:
npm install
Что такое вычисляемые свойства?
Vue JS – это фреймворк на основе JavaScript. В его основе лежат шаблоны. Но в процессе написания кода разработчики могут перегружать шаблоны Vue излишней логиков. Поэтому рекомендуется разбить создаваемое приложение на компоненты для улучшения модульной разработки.
Но авторы Vue пошли чуть дальше, и представили вычисляемые свойства. Они обеспечивают максимальную простоту шаблона в каждом компоненте.
Рекомендуется использовать вычисляемые свойства для сложных логических вычислений, так как размещение логики в шаблоне может привести к серьезным проблемам.
Почему это так важно
Вычисляемые свойства в Vue JS позволяют получить специфичные, сложные значения, вычисляемые для визуализации. Эти значения привязываются к выбранным значениям зависимостей и обновляются только при изменениях в связанном элементе.
Синтаксис вычисляемых свойств
<script>
export default {
computed: {
}
}
</script>
Методы и вычисляемые свойства
Синтаксис вычисляемых свойств напоминает синтаксис методов. Но вычисляемые свойства намного эффективнее.
Что будем создавать
Мы создадим простое Vue -приложение с компонентом Test. Он представляет собой игру Money, демонстрирующую базовые математические выражения в работе.
Откройте приложение Vue Canvas в VS Code и скопируйте код, представленный ниже, в файл Test.vue:
<template>
<div>
<h2>The money Game</h2>
<p>Jack and Jill both won 2 all-access tickets to the Amusement Park </p>
<p>They both also have $100 each in their pockets and want to play the MG</p>
<button v-on:click="jack++">Add $1 to Jack</button>
<button v-on:click="jill++">Add $1 to Jill</button>
<p>Jack: ${{jack}}</p> <p>Jill: ${{jill}}</p>
<p>Jack's Total: {{addJack()}}</p>
<p>Jill's Total: {{addJill()}}</p>
</div>
</template>
<script>
export default {
name: 'Test',
data() {
return {
safe: 100,
jack: 0,
jill: 0
}
},
methods:{
addJack: function(){
console.log('Jack function ran!');
return '$'+(this.jack + this.safe);
},
addJill: function(){
console.log('Jill function ran!');
return '$'+(this.jill + this.safe);
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
margin: 40px 0 0;
}
ul {
list-style-type: none;
padding: 0;
}
li {
display: inline-block;
margin: 0 10px;
}
a {
color: #42b983;
}
button {
background-color: rgb(58, 128, 194);
border: none;
color: white;
padding: 15px 32px;
margin: 5px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 18px;
}
</style>
Запустите приложение в командной строке редактора:
npm run serve
Приложение выглядит следующим образом:

Демонстрационное приложение
Это демонстрационное приложение с методами. Давайте пойдем дальше и рассмотрим несколько проблем, связанных с выполнением вычислений на уровне метода.
Недостатки использования методов
- Метод запускается сверху вниз, когда вызывается любая его часть. Но иногда нужен набор функций, которые запускаются только когда это необходимо. Вычисляемые свойства являются реактивной версией методов.
- Вычисляемые свойства сохраняют значения зависимостей в кэше, чтобы они могли легко обновляться при изменении данных свойств без необходимости обновлять все.
- Методы должны быть определены, иметь ссылку и вызываться. Этот жизненный цикл сокращается с помощью вычисляемых свойств. Так как их не нужно вызывать. Vue делает это, отслеживая изменения в кэше.
- Вычисляемые свойства более экономно используют ресурсы памяти устройства.
Решение: вычисляемые свойства
Измените раздел script в файле Test.vue на код, приведенный ниже, чтобы модифицировать методы в вычисляемые свойства:
<script>
export default {
name: 'Test',
data() {
return {
safe: 100,
jack: 0,
jill: 0
}
},
computed:{
addJack: function(){
console.log('Jack function ran!');
return '$'+(this.jack + this.safe);
},
addJill: function(){
console.log('Jill function ran!');
return '$'+(this.jill + this.safe);
}
}
}
</script>
Вот и все, что необходимо сделать. Теперь снова запустите приложение:
npm run serve
Приложение даст сбой, и вы увидите приведенное ниже сообщение об ошибке.

Чтобы исправить это, откройте используемый шаблон и удалите скобки функций. Ваш раздел template должен выглядеть следующим образом:
<template>
<div>
<h2>The money Game</h2>
<p>Jack and Jill both won 2 all-access tickets to the Amusement Park </p>
<p>They both also have $100 each in their pockets and want to play the MG</p>
<button v-on:click="jack++">Add $1 to Jack</button>
<button v-on:click="jill++">Add $1 to Jill</button>
<p>Jack: ${{jack}}</p> <p>Jill: ${{jill}}</p>
<p>Jack's Total: {{addJack}}</p>
<p>Jill's Total: {{addJill}}</p>
</div>
</template>
Вызовы методов addJack() и addJill() станут простыми ссылками на вычисляемые свойства addJack и addJill. Теперь приложение должно работать без ошибок.

Вычисляемые свойства в отличие от методов запускают только необходимые функции. Полный код к этому руководству доступен на GitHub.
Заключение
Эта статья дает представление о вычисляемых свойствах в Vue JS. А также демонстрирует их эффективность при обработке сложных вычислений.