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 будет запускаться предупреждение, как продемонстрировано на следующем скриншоте.

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";

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

Как мы видели ранее, в 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.