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

2022-08-09

В данной статье мы познакомимся с вычисляемыми свойствами, которые помогут вам освоить фреймворк 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. Теперь приложение должно работать без ошибок.