От автора: существуют во Vue JS параметры для добавления реактивности свойствам, которые добавляются динамично. Давайте представим, что мы уже создали экземпляр vue и нам нужно добавить свойство watch.
Это можно сделать следующим образом:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 |
<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, нам нужно сделать следующее:
1 2 3 |
vm.$watch('counter', function(nval, oval) { alert('Counter is incremented :' + oval + ' to ' + nval + '!'); }); |
Нам нужно использовать $watch, чтобы добавить watch вне экземпляра vue. Появляется предупреждение, которое сообщает об изменении значения свойства counter. Добавляется также функция таймера, то есть setTimeout, которая задаёт значение счётчика 20.
1 2 3 4 5 |
setTimeout( function(){ vm.counter = 20; },2000 ); |
Когда бы не был изменён счётчик, от метода watch будет запускаться предупреждение, как продемонстрировано на следующем скриншоте.
VueJS не может обнаружить добавление и удаление. Лучше всего всегда объявлять свойства, которые предварительно должны быть реактивными в экземпляре Vue. Если нам нужно на ходу добавлять свойства, то можно использовать методы Vue global, Vue.set и Vue.delete.
Vue.set
Этот метод помогает задавать свойство объекту. Его используют для того, чтобы обойти ограничения Vue, который не может обнаружить добавления свойств.
Синтаксис
1 |
Vue.set( target, key, value ) |
target — может быть объект или массив
key — строка или число
value — любой тип
Давайте рассмотрим пример.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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, созданную в начале при помощи следующего кода.
1 |
var myproduct = {"id":1, name:"book", "price":"20.00"}; |
Она передаётся объекту данных в экземпляре Vue следующим образом:
1 2 3 4 5 6 7 |
var vm = new Vue({ el: '#app', data: { counter: 1, products: myproduct } }); |
Представим, что после создания экземпляра Vue мы хотим добавить ещё одно свойство к массиву myproduct. Это можно сделать следующим образом:
1 |
vm.products.qty = "1"; |
Давайте посмотрим на результат в консоли.
Как мы видели ранее, в products добавляется количество. Методы get/set, которые фактически добавляют реактивность, являются доступными для id, name и price, и недоступными для qty.
Мы не можем добиться реактивности, просто добавив объект vue. VueJS, как правило нужно создавать все его свойства в начале. Однако, если нам нужно добавить их позже, то можно использовать Vue.set. Для этого нам нужно задать их используя vue global, то есть Vue.set.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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 к массиву при помощи следующего кода.
1 |
Vue.set(myproduct, 'qty', 1); |
Мы консолидировали объект vue и вот какой результат получили.
Теперь мы видим, что get/set были добавлены к qty при помощи Vue.set.
Vue.delete
Эта функция используется для того, чтобы динамично удалить свойство.
1 |
Vue.delete( target, key ) |
target — может быть объект или массив
key — строка или число
Чтобы удалить еще какой-нибудь код, мы можем использовать Vue.delete:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 |
<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 из массива при помощи следующего кода.
1 |
Vue.delete(myproduct, 'price'); |
В консоли мы увидим следующий результат.
После удаления мы сможем увидеть только id и name, поскольку price удалён. Мы можем видеть, что методы get/set также удалены.
Источник: //www.tutorialspoint.com/
Редакция: Команда webformyself.