Diving into Vue.js Reactivity

Transcript

1. Diving into Reac-vity !"# Diving into Reac-vity - @ianaya89
2. Nacho Anaya @ianaya89 • Full Stack Developer @BloqInc • Ambassador @Auth0 • Ambassador Na>veScript • Organizador @Vuenos_Aires Diving into Reac-vity - @ianaya89
3. ! na$vescript-vue.org ! Diving into Reac-vity - @ianaya89
4. ! Vue.js Diving into Reac-vity - @ianaya89
5. new Vue({ data () { return { hi: 'Hi ! ' } }, template: `<h1>{{ hi }}</h1>` }) Diving into Reac-vity - @ianaya89
6. Diving into Reac-vity - @ianaya89
7. ! Que es Reac)vidad? Diving into Reac-vity - @ianaya89
8. ! No es solo RxJS Diving into Reac-vity - @ianaya89
9. ! Accionar ante un es-mulo Diving into Reac-vity - @ianaya89
10. let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89
11. let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 value = 2 console.log(doubleValue) // 2 Diving into Reac-vity - @ianaya89
12. let value = 1 let doubleValue = value * 2 console.log(doubleValue) // 2 value = 2 doubleValue = value * 2 console.log(doubleValue) // 4 Diving into Reac-vity - @ianaya89
13. Diving into Reac-vity - @ianaya89
14. Diving into Reac-vity - @ianaya89
15. ! Reac&vidad en Frameworks: • Angular: Dirty checking • React: setState • Vue: Ge6ers y Se6ers Diving into Reac-vity - @ianaya89
16. ☠ BiuSheiEs Diving into Reac-vity - @ianaya89
17. ⚠ Diving into Reac-vity - @ianaya89
18. Diving into Reac-vity - @ianaya89
19. !" Ge$ers y Se$ers Diving into Reac-vity - @ianaya89
20. ! Object.defineProperty Diving into Reac-vity - @ianaya89
21. ! r() Diving into Reac-vity - @ianaya89
22. function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89
23. function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } Diving into Reac-vity - @ianaya89
24. function r(obj) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue } }) } return wrapped } const reactiveData = r({ foo: 1 }) reactiveData.foo++ console.log(reactiveData.foo) Diving into Reac-vity - @ianaya89
25. Diving into Reac-vity - @ianaya89
26. ! component Diving into Reac-vity - @ianaya89
27. const component = { el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() Diving into Reac-vity - @ianaya89
28. const component = { el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() Diving into Reac-vity - @ianaya89
29. Diving into Reac-vity - @ianaya89
30. ! r() + component Diving into Reac-vity - @ianaya89
31. const component = { el: document.getElementById('app'), data: r({ hi: 'Hi ! '}), render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } Diving into Reac-vity - @ianaya89
32. const component = { el: document.getElementById('app'), data: r({ hi: 'Hi ! '}), render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.render() component.data.hi = 'Bye ✌ ' component.render() Diving into Reac-vity - @ianaya89
33. Diving into Reac-vity - @ianaya89
34. ! r() + subscriber Diving into Reac-vity - @ianaya89
35. function r(obj, cb) { const wrapped = {} for (let k in obj) { let value = obj[k] Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89
36. const component = { el: document.getElementById('app'), render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } } component.data = r({ hi: 'Hi ' }, component.render.bind(component)) Diving into Reac-vity - @ianaya89
37. Diving into Reac-vity - @ianaya89
38. ! new BiuSheiEs() Diving into Reac-vity - @ianaya89
39. function BiuSheiEs (vm) { const data = vm.data || {} const render = vm.render.bind(vm) vm.data = r(data, render) return vm } Diving into Reac-vity - @ianaya89
40. const component = new BiuSheiEs({ el: document.getElementById('app'), data: { hi: 'Hi ! ' }, render () { this.el.innerHTML = `<h1>${this.data.hi}</h1>` } }) Diving into Reac-vity - @ianaya89
41. Diving into Reac-vity - @ianaya89
42. ! data anidada Diving into Reac-vity - @ianaya89
43. function r(obj, cb) { const wrapped = {} for (let k in obj) { let value = obj[k] if (typeof value === 'object' && !Array.isArray(value)) { value = r(value, cb) } Object.defineProperty(wrapped, k, { get () { return value }, set (newValue) { console.log('New value: ', newValue) value = newValue cb() } }) } return wrapped } Diving into Reac-vity - @ianaya89
44. const component = new BiuSheiEs({ el: document.getElementById('app'), data: { user: { name: '@ianaya89' } }, render () { this.el.innerHTML = `<h1>Welcome ${this.data.user.name}</h1>` } }) Diving into Reac-vity - @ianaya89
45. Diving into Reac-vity - @ianaya89
46. ! ~ 50 líneas de código Diving into Reac-vity - @ianaya89
47. Diving into Reac-vity - @ianaya89
48. ! Reac&vity Caveats vuejs.org/v2/guide/reac0vity.html Diving into Reac-vity - @ianaya89
49. ! Vue 3 Proxy Diving into Reac-vity - @ianaya89
50. Diving into Reac-vity - @ianaya89
51. Gracias! @ianaya89 Diving into Reac-vity - @ianaya89
52. ! Diving into Reac-vity - @ianaya89
53. ⁉ Preguntas? Diving into Reac-vity - @ianaya89
54. ! Links bit.ly/diving-vue bit.ly/diving-vue-demo Diving into Reac-vity - @ianaya89