Vue JS computed props — Вычисляемые свойства

Vue JS computed props — Вычисляемые свойства

От автора: мы уже ознакомились с методами для экземпляра Vue и компонентов. Вычисляемые свойства — Vue JS computed props — похожи на методы, но кое-чем они отличаются. Эти различия мы и рассмотрим в данном разделе. В результате вы научитесь определять, где лучше использовать методы, а где – вычисляемые свойства.

Давайте разберёмся в вычисляемых свойствах с помощью примера.

vue_computeprops.js

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

Здесь мы создали файл .html с firstname и lastname. Firstname и Lastname – это текстовые поля, связанные с использованием свойств firstname и lastname. Мы вызываем вычисляемый метод getfullname, который возвращает введённые firstname и lastname.

Когда мы вводим данные в текстовом поле, функция возвращает то же самое, когда изменяется свойство firstname или lastname. В связи с этим, с помощью computed нам не нужно делать ничего особенного, например, помнить о вызове функции. При использовании computed она вызывается сама, потому что свойства используют внутренние изменения, то есть firstname и lastname.

Мы убедимся в этом на следующем примере. То, что вы введёте в текстовое поле, будет обновлено с помощью вычисляемой функции.

А теперь давайте попробуем понять, в чём заключается разница между методом и вычисляемым свойством. Оба являются объектами. Внутри них определяются функции, которые возвращают значение.

В случае метода, мы вызываем его как функцию, а вычисляемое свойство вызывается, как свойство. Давайте разберёмся в отличиях между методом и вычисляемым свойством на следующем примере.

В вышеприведённом коде мы создали метод под названием getrandomno1 и вычисляемое свойство с функцией getrandomno. Оба выдают случайные числа используя Math.random().

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

Если мы посмотрим на значения, то увидим, что случайные числа, возвращаемые вычисляемым свойством, остаются теми же, независимо от того, сколько раз мы его вызвали. Это значит, что каждый раз, когда его вызывают, обновляется последнее значение. При этом, метод – это функция, а значит, каждый раз, когда его вызывают, он возвращает разное значение.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

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

В данном разделе мы узнаем о функциях get/set в вычисляемых свойствах и рассмотрим примеры.

Мы определили одно поле ввода, связанное с fullname, которое является вычисляемым свойством. Оно возвращает функцию под названием get, которая даёт fullname, то есть first name и lastname. Мы отобразили firstname и lastname таким образом:

Давайте посмотрим на вывод в браузере.

Теперь, если мы изменим имя в поле, то увидим, что то оно не отображается в имени на следующем скриншоте.

Давайте добавим в вычисляемое свойство fullname функцию set.

Мы добавили функцию set в вычисляемое свойство fullname.

Она имеет параметр name, который является ничем другим, как fullname в текстовом поле. Позже, она разделяется через пробел, а firstname и lastname обновляются. Когда мы выполняем код и редактируем текстовое поле, то же самое будет отображаться в браузере. firstname и lastname будут обновлены, благодаря функции set. Функция get возвращает firstname и lastname, в то время как функция set их обновляет, если что-либо редактируется.

И теперь, что бы не было введено в текстовое поле, оно будет совпадать с тем, что отображается ниже, как это показано на вышеприведённом скриншоте.

Источник: https://www.tutorialspoint.com/

Редакция: Команда webformyself.

Как создать сайт самому?

Какие технологии и знания необходимы сегодня, чтобы создавать сайты самостоятельно? Узнайте на интенсиве!

Зарегистрироваться

VUE JS. Быстрый старт

Создание веб-приложения на VUE JS

Смотреть

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий