От автора: мы уже ознакомились с методами для экземпляра Vue и компонентов. Вычисляемые свойства — Vue JS computed props — похожи на методы, но кое-чем они отличаются. Эти различия мы и рассмотрим в данном разделе. В результате вы научитесь определять, где лучше использовать методы, а где – вычисляемые свойства.
Давайте разберёмся в вычисляемых свойствах с помощью примера.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> FirstName : <input type = "text" v-model = "firstname" /> <br/><br/> LastName : <input type = "text" v-model = "lastname"/> <br/><br/> <h1>My name is {{firstname}} {{lastname}}</h1> <h1>Using computed method : {{getfullname}}</h1> </div> <script type = "text/javascript" src = "js/vue_computedprops.js"></script> </body>
</html>
vue_computeprops.js
var vm = new Vue({ el: '#computed_props', data: { firstname :"", lastname :"", birthyear : "" }, computed :{ getfullname : function(){ return this.firstname +" "+ this.lastname; } }
})
Здесь мы создали файл .html с firstname и lastname. Firstname и Lastname – это текстовые поля, связанные с использованием свойств firstname и lastname. Мы вызываем вычисляемый метод getfullname, который возвращает введённые firstname и lastname.
computed :{ getfullname : function(){ return this.firstname +" "+ this.lastname; }
}
Когда мы вводим данные в текстовом поле, функция возвращает то же самое, когда изменяется свойство firstname или lastname. В связи с этим, с помощью computed нам не нужно делать ничего особенного, например, помнить о вызове функции. При использовании computed она вызывается сама, потому что свойства используют внутренние изменения, то есть firstname и lastname.
Мы убедимся в этом на следующем примере. То, что вы введёте в текстовое поле, будет обновлено с помощью вычисляемой функции.
А теперь давайте попробуем понять, в чём заключается разница между методом и вычисляемым свойством. Оба являются объектами. Внутри них определяются функции, которые возвращают значение.
В случае метода, мы вызываем его как функцию, а вычисляемое свойство вызывается, как свойство. Давайте разберёмся в отличиях между методом и вычисляемым свойством на следующем примере.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> <h1>Random No from method : {{getrandomno1()}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1 style = "background-color:gray;">Random No from computed property: {{getrandomno}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> <h1>Random No from method: {{getrandomno1()}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { name : "helloworld" }, methods: { getrandomno1 : function() { return Math.random(); } }, computed :{ getrandomno : function(){ return Math.random(); } } }); </script> </body>
</html>
В вышеприведённом коде мы создали метод под названием getrandomno1 и вычисляемое свойство с функцией getrandomno. Оба выдают случайные числа используя Math.random().
Данный пример отображён на скриншоте ниже. Метод и вычисляемое свойство вызываются определенное количество раз для того, чтобы показать разницу.
Если мы посмотрим на значения, то увидим, что случайные числа, возвращаемые вычисляемым свойством, остаются теми же, независимо от того, сколько раз мы его вызвали. Это значит, что каждый раз, когда его вызывают, обновляется последнее значение. При этом, метод – это функция, а значит, каждый раз, когда его вызывают, он возвращает разное значение.
Get/Set в вычисляемых свойствах
В данном разделе мы узнаем о функциях get/set в вычисляемых свойствах и рассмотрим примеры.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <input type = "text" v-model = "fullname" /> <h1>{{firstName}}</h1> <h1>{{lastName}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { firstName : "Terry", lastName : "Ben" }, methods: { }, computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; } } } }); </script> </body>
</html>
Мы определили одно поле ввода, связанное с fullname, которое является вычисляемым свойством. Оно возвращает функцию под названием get, которая даёт fullname, то есть first name и lastname. Мы отобразили firstname и lastname таким образом:
<h1>{{firstName}}</h1>
<h1>{{lastName}}</h1>
Давайте посмотрим на вывод в браузере.
Теперь, если мы изменим имя в поле, то увидим, что то оно не отображается в имени на следующем скриншоте.
Давайте добавим в вычисляемое свойство fullname функцию set.
<html> <head> <title>VueJs Instance</title> <script type = "text/javascript" src = "js/vue.js"></script> </head> <body> <div id = "computed_props"> <input type = "text" v-model = "fullname" /> <h1>{{firstName}}</h1> <h1>{{lastName}}</h1> </div> <script type = "text/javascript"> var vm = new Vue({ el: '#computed_props', data: { firstName : "Terry", lastName : "Ben" }, methods: { }, computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; }, set : function(name) { var fname = name.split(" "); this.firstName = fname[0]; this.lastName = fname[1] } } } }); </script> </body>
</html>
Мы добавили функцию set в вычисляемое свойство fullname.
computed :{ fullname : { get : function() { return this.firstName+" "+this.lastName; }, set : function(name) { var fname = name.split(" "); this.firstName = fname[0]; this.lastName = fname[1] } }
}
Она имеет параметр name, который является ничем другим, как fullname в текстовом поле. Позже, она разделяется через пробел, а firstname и lastname обновляются. Когда мы выполняем код и редактируем текстовое поле, то же самое будет отображаться в браузере. firstname и lastname будут обновлены, благодаря функции set. Функция get возвращает firstname и lastname, в то время как функция set их обновляет, если что-либо редактируется.
И теперь, что бы не было введено в текстовое поле, оно будет совпадать с тем, что отображается ниже, как это показано на вышеприведённом скриншоте.
Источник: https://www.tutorialspoint.com/
Редакция: Команда webformyself.