![What if property not in data()?
8 /37
data () {
cart: {}
},
…
addProductToCart () {
this.cart.products = [{
id: 1,
name: 'Jacket',
quantity: 1
}, …]
}](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-8-320.jpg)
![Observing arrays in ES5
13 /37
this.items[indexOfItem] = newValue
this.items.length = newLength;](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-13-320.jpg)
![[Vue warn]
16 /37
Avoid adding reactive properties to a Vue instance or its
root $data at runtime - declare it upfront in the data
option.](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-16-320.jpg)
![this.$set()
18 /37
data () {
cart: {}
},
mounted () {
this.$set(this.cart, ‘products’,[{…},…]);
},
…](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-18-320.jpg)
![ES6 Proxy all together
29/37
let data = {}; // target
const handler = {
set (obj, prop, value) {
if (obj[prop] !== value) {
obj[prop] = value;
notifyDataChanged();
}
}
data = new Proxy(data,handler);](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-29-320.jpg)
![ES6 Proxy
30/37
data = new Proxy(…);
data.cart = {
products: []
};
// notifyDataChanged receives changes on
state](https://image.slidesharecdn.com/vue-next-en-171030104308/85/Vue-next-30-320.jpg)
Vue next
- 2. Front-end developer at YouWe UX-guy Busy with POS-plaform using Vue 2/37
- 3. Agenda • Reactivity as heart of Vue • Vue cant! • Future of Vue 3 /37
- 4. What is reactivity? 4 /37
- 5. Vue Reactivity system 5 /37
- 6. Vue Reactivity 6 /37 … data () { msg: ‘Click to start’ }, mounted () { console.log(‘this.data’, this._data); }, …
- 8. What if property not in data()? 8 /37 data () { cart: {} }, … addProductToCart () { this.cart.products = [{ id: 1, name: 'Jacket', quantity: 1 }, …] }
- 9. What if property not in data()? 9 /37
- 10. 10 /37 Properties missed in data () !== Reactive
- 11. 11 /37
- 12. Observing objects in ES5 12 /37 OBJECTADD PROP DELETE PROP SET GET
- 13. Observing arrays in ES5 13 /37 this.items[indexOfItem] = newValue this.items.length = newLength;
- 15. Vue.set/this.$set 15 /37 data () { }, addProductToCart () { this.$set(this._data, ‘cart’, {}); }
- 16. [Vue warn] 16 /37 Avoid adding reactive properties to a Vue instance or its root $data at runtime - declare it upfront in the data option.
- 18. this.$set() 18 /37 data () { cart: {} }, mounted () { this.$set(this.cart, ‘products’,[{…},…]); }, …
- 21. 21/60
- 22. 22/60
- 25. ES6 Proxy 25/37
- 26. ES6 Proxy 26/37 let proxy = new Proxy(target, handler);
- 27. ES6 Proxy target 27/37 let data = {}; // target
- 28. ES6 Proxy handler 28/37 const handler = { set (target, propKey, value) { … }, get (target, propKey){}, delete(target, propKey) {}, apply(target, context, args) }
- 29. ES6 Proxy all together 29/37 let data = {}; // target const handler = { set (obj, prop, value) { if (obj[prop] !== value) { obj[prop] = value; notifyDataChanged(); } } data = new Proxy(data,handler);
- 30. ES6 Proxy 30/37 data = new Proxy(…); data.cart = { products: [] }; // notifyDataChanged receives changes on state
- 32. What about IE?
- 34. Conclusions 34/37 • Proxy gives ability to build correct reactive system • Don’t need use monkey-patching for arrays! • V8 optimizations for proxies
- 36. 36
- 37. Contacts Vitalii Ratyshnyi Email: [email protected] Skype: misreadable Russian-speaking Vue telegram-chat: @vuejs_ru