vue.js — учимся использовать вычисляемые свойства

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

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

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

Напишем разметку нашего примера:

<div id="app">
 <input type="text" v-model="name"/>
 <input type="text" id="surname" value='Snow'/>
 <button @click="saveSurname">Save Surname</button>
 <output>{{computedFullName}}</output>
</div>

Здесь простая форма, с 2-мя полями, кнопкой отправки и output для отображения вычисляемого свойства.

<div id=»app»> — данный блок является корневым элементом нашего приложения, на него мы повесим инициализацию нашего vue приложения.

Корневой блок является обязательным для любого vue приложения, например повесить инициализацию на тэг body не получиться, данное действие приведет к ошибке.

v-model=»name», директива связующая ваш input с переменной name, т.е. по сути данная переменная будет получать значение поля, при его изменении (не забываем объявить данную переменную в инициализации приложения).

<input type=»text» id=»surname» value=’Snow’/> — просто input  с предустановленным значением — Snow.

<button @click=»saveSurname»>Save Surname</button> — кнопка, на которую назначен обработчик с именем — saveSurname, т.е при клике на кнопку, вызовется метод с именем saveSurname.

Итак, напишем код который покажет, как использовать вычисляемые свойства в vue.js:

var surname = 'Snow' // объявили переменную со значением
new Vue({ // инициализация экземпляра vue
    el: '#app', // указали корневой элемент, внутри которого будет работать наще приложение
    data: { 
        name: 'John' // указали используемые данные
    },
    computed: { // объявление вычисляемого свойства
        computedFullName() {
            return this.name + ' ' + surname
        }
    },
    methods: {
        saveSurname() {
            surname = this.$el.querySelector('#surname').value
        }
    }
})
computed: { // объявление вычисляемого свойства
        computedFullName() {
            return this.name + ' ' + surname
        }
    },

See the Pen
EqjzKR
by Nick (@megakolyan)
on CodePen.

Вычисляемые свойства в vue.js — как это работает?

В vue.js вычисляемые свойства описываются внутри блока computed.

Данный фрагмент кода указывает, что мы будем использовать вычисляемое свойство vue.js, с названием — computedFullName.

Внутри данного свойства мы возвращаем текущее значение input , обратившись к переменной name , которая привязана к input посредством директивы v-model и является реактивной, и добавляем значение переменной surname, которое у нас статично, пока вы не измените его заполнив второе поле и не нажмете кнопку. Данное свойство, благодаря return используется как переменная.

Обратите внимание, что внутри экземпляра vue вы можете обращаться к переменным через this.name,  где this это ссылка на экземпляр vue.

В методе computedFullName , мы посредством нативного js получаем значение второго поля и помещаем его в переменную surname. Мы могли бы использовать для второго поля директиву v-model, обеспечив реактивность переменной — surname.

Мы использовали вычисляемые свойства vue.js, объявив в блоке computed, вычисляемое свойство — computedFullName, которое является функцией, внутри которого возвращается текущее значение  переменной name, над которым проводятся манипуляции, в нашем случае прибавляется переменная surname.

Также стоит отметить что вычисляемые свойства, пересчитываются только в момент изменения данных этого свойства. Что хорошо сказывается на производительности приложения.