Vue JS — Параметры для реактивного интерфейса

Vue JS — Параметры для реактивного интерфейса

От автора: существуют во Vue JS параметры для добавления реактивности свойствам, которые добавляются динамично. Давайте представим, что мы уже создали экземпляр vue и нам нужно добавить свойство watch.

Это можно сделать следующим образом:

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "app">
 <p style = "font-size:25px;">Counter: {{ counter }}</p>
 <button @click = "counter++" style = "font-size:25px;">Click Me</button>
 </div>
 <script type = "text/javascript">
 var vm = new Vue({
 el: '#app',
 data: {
 counter: 1
 }
 });
 vm.$watch('counter', function(nval, oval) {
 alert('Counter is incremented :' + oval + ' to ' + nval + '!');
 });
 setTimeout(
 function(){
 vm.counter = 20;
 },2000
 );
 </script>
 </body>
</html>

В объекте данных есть счётчик свойств, инициализированный со значением 1. Счётчик увеличивается при нажатии на кнопку. Экземпляр Vue уже создан. Чтобы добавить к нему watch, нам нужно сделать следующее:

vm.$watch('counter', function(nval, oval) {
 alert('Counter is incremented :' + oval + ' to ' + nval + '!');
});

Нам нужно использовать $watch, чтобы добавить watch вне экземпляра vue. Появляется предупреждение, которое сообщает об изменении значения свойства counter. Добавляется также функция таймера, то есть setTimeout, которая задаёт значение счётчика 20.

setTimeout(
 function(){
 vm.counter = 20;
 },2000
);

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

VueJS не может обнаружить добавление и удаление. Лучше всего всегда объявлять свойства, которые предварительно должны быть реактивными в экземпляре Vue. Если нам нужно на ходу добавлять свойства, то можно использовать методы Vue global, Vue.set и Vue.delete.

Vue.set

Этот метод помогает задавать свойство объекту. Его используют для того, чтобы обойти ограничения Vue, который не может обнаружить добавления свойств.

Синтаксис

Vue.set( target, key, value )

target — может быть объект или массив

key — строка или число

value — любой тип

Давайте рассмотрим пример.

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "app">
 <p style = "font-size:25px;">Counter: {{ products.id }}</p>
 <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
 </div>
 <script type = "text/javascript">
 var myproduct = {"id":1, name:"book", "price":"20.00"};
 var vm = new Vue({
 el: '#app',
 data: {
 counter: 1,
 products: myproduct
 }
 });
 vm.products.qty = "1";
 console.log(vm);
 vm.$watch('counter', function(nval, oval) {
 alert('Counter is incremented :' + oval + ' to ' + nval + '!');
 });
 </script>
 </body>
</html>

В вышеприведённом примере мы видим переменную myproduct, созданную в начале при помощи следующего кода.

var myproduct = {"id":1, name:"book", "price":"20.00"};

Она передаётся объекту данных в экземпляре Vue следующим образом:

var vm = new Vue({
 el: '#app',
 data: {
 counter: 1,
 products: myproduct
 }
});

Представим, что после создания экземпляра Vue мы хотим добавить ещё одно свойство к массиву myproduct. Это можно сделать следующим образом:

vm.products.qty = "1";

Давайте посмотрим на результат в консоли.

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

Как мы видели ранее, в products добавляется количество. Методы get/set, которые фактически добавляют реактивность, являются доступными для id, name и price, и недоступными для qty.

Мы не можем добиться реактивности, просто добавив объект vue. VueJS, как правило нужно создавать все его свойства в начале. Однако, если нам нужно добавить их позже, то можно использовать Vue.set. Для этого нам нужно задать их используя vue global, то есть Vue.set.

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "app">
 <p style = "font-size:25px;">Counter: {{ products.id }}</p>
 <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
 </div>
 <script type = "text/javascript">
 var myproduct = {"id":1, name:"book", "price":"20.00"};
 var vm = new Vue({
 el: '#app',
 data: {
 counter: 1,
 products: myproduct
 }
 });
 Vue.set(myproduct, 'qty', 1);
 console.log(vm);
 vm.$watch('counter', function(nval, oval) {
 alert('Counter is incremented :' + oval + ' to ' + nval + '!');
 });
 </script>
 </body>
</html>

Мы использовали Vue.set, чтобы добавить qty к массиву при помощи следующего кода.

Vue.set(myproduct, 'qty', 1);

Мы консолидировали объект vue и вот какой результат получили.

Теперь мы видим, что get/set были добавлены к qty при помощи Vue.set.

Vue.delete

Эта функция используется для того, чтобы динамично удалить свойство.

Vue.delete( target, key )

target — может быть объект или массив

key — строка или число

Чтобы удалить еще какой-нибудь код, мы можем использовать Vue.delete:

<html>
 <head>
 <title>VueJs Instance</title>
 <script type = "text/javascript" src = "js/vue.js"></script>
 </head>
 <body>
 <div id = "app">
 <p style = "font-size:25px;">Counter: {{ products.id }}</p>
 <button @click = "products.id++" style = "font-size:25px;">Click Me</button>
 </div>
 <script type = "text/javascript">
 var myproduct = {"id":1, name:"book", "price":"20.00"};
 var vm = new Vue({
 el: '#app',
 data: {
 counter: 1,
 products: myproduct
 }
 });
 Vue.delete(myproduct, 'price');
 console.log(vm);
 vm.$watch('counter', function(nval, oval) {
 alert('Counter is incremented :' + oval + ' to ' + nval + '!');
 });
 </script>
 </body>
</html>

В приведённом выше примере мы использовали Vue.delete, чтобы удалить price из массива при помощи следующего кода.

Vue.delete(myproduct, 'price');

В консоли мы увидим следующий результат.

После удаления мы сможем увидеть только id и name, поскольку price удалён. Мы можем видеть, что методы get/set также удалены.

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

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

Фреймворк VUE JS: быстрый старт, первые результаты

Получите бесплатный курс и создайте веб-приложение на трендовой Frontend-технологии VUE JS с полного нуля

Узнать подробнее

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

Практический курс по созданию веб-приложения на VUE JS с полного нуля

Получить

Метки:

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

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

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

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

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Я не робот.

Spam Protection by WP-SpamFree