От автора: существуют во 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.