What about reactivity? So much talks about it, but does it really reactive? How to solve current reactivity purposes. Future of Vue.js. Try to find answers in these slides.

1. Vue-next
Vitalii Ratyshnyi
Front-end developer, YouWe

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);
},
…

7. Vue Reactivity
7 /37

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;

14. Vue.set/this.$set
14 /37
Vue.set(object, key, value)

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’,[{…},…]);
},
…

19. this.$set()
19 /37

21. 21/60

22. 22/60

23. 23/37
https://github.com/vuejs/roadmap

24. ES6 Proxy
24/37
Objectget Proxy

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

31. ES6 Proxy Problems
31/60
https://caniuse.com/#search=proxy

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: v.ratyshnij@gmail.com
Skype: misreadable
Russian-speaking Vue telegram-chat: @vuejs_ru