Future of Vue – JSFoo VueDay 2019

On 1st October 2016, we released Vue 2.0. Three years have passed since. The frontend ecosystem, especially JavaScript standards and browsers, have come far. New APIs – e.g., Proxies – are available on most browsers. This has presented us with an opportunity to address the caveats in Vue's reactivity system. We are using this opportunity to address the smaller but important issues in the ecosystem. A cherry on top, significant performance enhancements for Vue 3.

1. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Future of Vue
2. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
3. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan cc @gustojs
4. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan cc @gustojs
5. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Platinum Sponsor Exhibition Sponsor Community Sponsor
6. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Easy to Learn
7. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Components
8. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Build your blog!
9. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Scale can mean PEOPLE
10. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Plugins cure Pain
11. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Looked under the hood
12. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan React developer’s love for Vue
13. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Accessibility is Business
14. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Vue 3.0 is Coming
15. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan @znck0
16. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://blr.vue.community
17. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://awesomeconf.design
18. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
19. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan 3.0
20. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
21. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan const data = vm.$options.data() Object.defineProperty(vm, key, { get() { // track dependency ... return data[key] }, set(value) { data[key] = value // notify dependencies ... } })
22. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan const data = vm.$options.data() Object.defineProperty(vm, key, { get() { // track dependency ... return data[key] }, set(value) { data[key] = value // notify dependencies ... } })
23. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan const data = vm.$options.data() Object.defineProperty(vm, key, { get() { // track dependency ... return data[key] }, set(value) { data[key] = value // notify dependencies ... } })
24. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan const data = vm.$options.data() Object.defineProperty(vm, key, { get() { // track dependency ... return data[key] }, set(value) { data[key] = value // notify dependencies ... } }) Do you see the problem?
25. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://vuejs.org/v2/guide/reactivity.html#Change-Detection-Caveats Addition/removal of properties Array index or length assignment Linear complexity
26. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
27. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
28. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan No more caveats!
29. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan No more caveats!
30. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
31. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan … and it works with Map Set WeakMap WeakSet Any Other Class
32. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Faster
33. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Faster much faster
 than Object.definePrototype
34. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6 v3.0 (prototype) Rendering 3000 stateful component instances
35. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6 v3.0 (prototype) Rendering 3000 stateful component instances Double Speed

36. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6 v3.0 (prototype) Rendering 3000 stateful component instances 
 Half Memory
37. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6 v3.0 (prototype) Rendering 3000 stateful component instances Double Speed
 Half Memory
38. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Crash Course: Virtual DOM
39. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Template / DOM <div class="container"> <span>Hello World! </span> </div>
40. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan { tag: 'div', attrs: { class: 'container', }, children: [ { tag: ‘span', attrs: {}, children: ['Hello World!'], }, ], } Virtual DOM <div class="container"> <span>Hello World! </span> </div>
41. <div class="container"> <span>Hello World! </span> </div> Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan function render(createElement) { return createElement( 'div', { class: 'container'}, [ createElement('span', {}, ['Hello World!']) ] ) } Render Function
42. function render(createElement) { return createElement( 'div', { class: 'container'}, [ createElement('span', {}, ['Hello World!']) ] ) } <div class="container"> <span>Hello World! </span> </div> Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Render Function
43. function render(createElement) { return createElement( 'div', { class: 'container'}, [ createElement('span', {}, ['Hello World!']) ] ) } <div class="container"> <span>Hello World! </span> </div> Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Render Function createElement( /* tag */ ‘div', /* attrs */ { class: ‘container'}, /* children */ [ ...] )
44. function render(createElement) { return createElement( 'div', { class: 'container'}, [ createElement('span', {}, ['Hello World!']) ] ) } <div class="container"> <span>Hello World! </span> </div> Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Virtual DOM Node { tag: 'div', attrs: { class: 'container'}, children: [ ...] }
45. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Template -> Render Function <div class="container"> <span>Hello World! </span> </div> function render(createElement) { return createElement( 'div', { class: 'container'}, [createElement( 'span', {}, ['Hello World!’] )] ) }
46. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Render Function -> Virtual DOM { tag: 'div', attrs: { class: 'container', }, children: [ { tag: ‘span', attrs: {}, children: ['Hello World!'], }, ], } function render(createElement) { return createElement( 'div', { class: 'container'}, [createElement( 'span', {}, ['Hello World!’] )] ) }
47. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Smarter Compiler
48. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
49. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
50. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
51. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createElement(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElement('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
52. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Child Type Detection function createElement(tag, ...) { if (isComponent(tag)) return createComponentVNode(tag, ...) if (isElement(tag)) return createElementVNode(tag, ...) ... }
53. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
54. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template function render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Element Type Detection
55. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Monomorphic Calls
56. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Monomorphic Calls
57. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Monomorphic Calls
58. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Monomorphic Calls
59. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan createElementVNode('span', null, null, 0 /* no children */)
60. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan createElementVNode('span', null, null, 0 /* no children */)
61. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan createElementVNode('span', null, [ ...], 0 /* no children */)
62. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan createElementVNode('span', null, [ ...], 0 /* no children */)
63. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Component Fast Paths
64. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> </Comp> <div> <span> </span> </div> Template render() { const Comp = resolveComponent('Comp', this) return createFragment([ createComponentVNode(Comp, null, null, 0 /* no children */), createElementVNode('div', null, [ createElementVNode('span', null, null, 0 /* no children */) ], 2 /* single vnode child */) ], 8 /* multiple non-keyed children */) } Compiler Output Component Fast Paths
65. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> <div>{{ hello }} </div> </Comp> function render() { return h(Comp, null, { default: [h('div', this.hello)] }, 16 /* compiler generated slots */) } Template Optimised Slot Generation Compiled Output
66. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> <div>{{ hello }} </div> </Comp> function render() { return h(Comp, null, { default: [h('div', this.hello)] }, 16 /* compiler generated slots */) } Template Optimised Slot Generation Compiled Output
67. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp> <div>{{ hello }} </div> </Comp> function render() { return h(Comp, null, { default: () => [h('div', this.hello)] }, 16 /* compiler generated slots */) } Template Optimised Slot Generation Compiled Output
68. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div> <span class="foo"> Static </span> <span> {{ dynamic }} </span> </div> Template function render() { return createElementVNode('div', null, [ createElementVNode( 'span', { class: 'foo' }, [createTextVNode('static')], 0 ), createElementVNode( 'span', null, [createTextVNode(this.dynamic)], 0 ), ]) } Compiler Output Static Tree Hoisting
69. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div> <span class="foo"> Static </span> <span> {{ dynamic }} </span> </div> Template function render() { return createElementVNode('div', null, [ createElementVNode( 'span', { class: 'foo' }, [createTextVNode('static')], 0 ), createElementVNode( 'span', null, [createTextVNode(this.dynamic)], 0 ), ]) } Compiler Output Static Tree Hoisting
70. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div> <span class="foo"> Static </span> <span> {{ dynamic }} </span> </div> Template function render() { return createElementVNode('div', null, [ createElementVNode( 'span', { class: 'foo' }, [createTextVNode('static')], 0 ), createElementVNode( 'span', null, [createTextVNode(this.dynamic)], 0 ), ]) } Compiler Output Static Tree Hoisting
71. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div> <span class="foo"> Static </span> <span> {{ dynamic }} </span> </div> Template const __static1 = createElementVNode( 'span', { class: 'foo' }, [createTextVNode('static')], 0 ) function render() { return createElementVNode('div', null, [ __static1, createElementVNode( 'span', null, [createTextVNode(this.dynamic)], 0 ), ]) } Compiler Output Static Tree Hoisting
72. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan const __static1 = createElementVNode( 'span', { class: 'foo' }, [createTextVNode('static')], 0 ) function render() { return createElementVNode('div', null, [ __static1, createElementVNode( 'span', null, [createTextVNode(this.dynamic)], 0 ), ]) } Compiler Output Static Tree Hoisting <div> <span class="foo"> Static </span> <span> {{ dynamic }} </span> </div> Template
73. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div id="foo" class="bar"> {{ state }} </div> Template function render() { return createElementVNode( 'div', { id: 'foo', class: 'bar' }, [createTextVNode(this.state)], 0 ) } Compiler Output Static Props Hoisting
74. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div id="foo" class="bar"> {{ state }} </div> Template function render() { return createElementVNode( 'div', { id: 'foo', class: 'bar' }, [createTextVNode(this.state)], 0 ) } Compiler Output Static Props Hoisting
75. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div id="foo" class="bar"> {{ state }} </div> Template const __static1 = { id: 'foo', class: 'bar' } function render() { return createElementVNode( 'div', __static1, [createTextVNode(this.state)], 0 ) } Compiler Output Static Props Hoisting
76. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp @event="count ++" /> Template function render() { const Comp = resolveComponent('Comp', this) return createComponentVNode(Comp, { onEvent: $event => { this.count ++ } }, null, 0) } Compiler Output Inline Event Handler Hoisting
77. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp @event="count ++" /> Template function render() { const Comp = resolveComponent('Comp', this) return createComponentVNode(Comp, { onEvent: $event => { this.count ++ } }, null, 0) } Compiler Output Inline Event Handler Hoisting
78. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <Comp @event="count ++" /> Template const __handler1 = function ($event) { this.count ++ } function render() { const Comp = resolveComponent('Comp', this) return createComponentVNode(Comp, { onEvent: getBoundFunction( __handler1, this) }, null, 0) } Compiler Output Inline Event Handler Hoisting
79. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Faster Virtual DOM
80. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan New Diffing Algorithm
81. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
82. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
83. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
84. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
85. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
86. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
87. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
88. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
89. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
90. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
91. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
92. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff {{ message }} <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
93. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff {{ message }} -> Diff <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
94. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff {{ message }} -> Diff <p> -> Diff class="text" <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
95. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff {{ message }} -> Diff <p> -> Diff class="text" -> Diff children of <p> <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
96. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id="content" -> Diff children of <div> -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff {{ message }} -> Diff <p> -> Diff class="text" -> Diff children of <p> -> Diff Lorem ipsum <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
97. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <div> -> Diff id=“content" -> Diff children of <div> -> Diff <p> -> Diff class=“text" -> Diff children of <p> -> Diff Lorem ipsum -> Diff <p> -> Diff class=“text" -> Diff children of <p> -> Diff {{ message }} -> Diff <p> -> Diff class=“text" -> Diff children of <p> -> Diff Lorem ipsum <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
98. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff {{ message }} <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
99. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff {{ message }} <div id="content"> <p class="text">Lorem ipsum </p> <p class="text">{{ message }} </p> <p class="text">Lorem ipsum </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
100. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <p> -> Diff {{ message }} <div> <p class="text">Lorem ipsum </p> <p v-if="ok"> <span>Lorem ipsum </span> <span>{{ message }} </span> </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
101. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <p> -> Diff {{ message }} <div> <p class="text">Lorem ipsum </p> <p v-if="ok"> <span>Lorem ipsum </span> <span>{{ message }} </span> </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
102. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff <p> -> Diff {{ message }} <div> <p class="text">Lorem ipsum </p> <p v-for="message of messages"> <span>Lorem ipsum </span> <span>{{ message }} </span> </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
103. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan -> Diff every <p> -> Diff every {{ message }} <div> <p class="text">Lorem ipsum </p> <p v-for="message of messages"> <span>Lorem ipsum </span> <span>{{ message }} </span> </p> </div> Template Diffing Algorithm Steps New Diffing Algorithm
104. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
105. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
106. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
107. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
108. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
109. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Smaller Bundle
110. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan ~10kb (gzipped)
111. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md import Vue from 'vue' Vue.nextTick(() => { // ... })
112. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md import { nextTick } from 'vue' nextTick(() => { // ... })
113. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md import { Transition, TransitionGroup, vShow, ... } from 'vue' Tree-Shaking Friendly
114. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan https://github.com/vuejs/rfcs/blob/treeshaking/active-rfcs/0000-global-api-treeshaking.md import { Transition, TransitionGroup, vShow, ... } from 'vue' Tree-Shaking Friendly
115. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Less than 10kb (gzipped)
116. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Finer DX
117. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <script> export default { props: ['count'], renderTriggered(event) { debugger } } </script> <template> <div>{{ count }} </div> </template> Render Causation
118. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <script> export default { props: ['count'], renderTriggered(event) { debugger } } </script> <template> <div>{{ count }} </div> </template> Render Causation
119. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan <script> export default { props: ['count'], renderTriggered(event) { debugger } } </script> <template> <div>{{ count }} </div> </template> Render Causation
120. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Better Warning Traces
121. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Template Source-maps
122. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Easier for Native
123. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
124. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
125. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
126. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Simpler to Contribute
127. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
128. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan
129. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Vue 3.0 uses TypeScript
130. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Vue 3.0 uses TypeScript But you don’t have to!
131. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan http://github.com/vuejs/rfcs
132. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan http://github.com/vuejs/rfcs Voice your concerns!
133. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Composition API
134. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
135. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
136. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
137. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
138. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
139. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
140. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
141. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
142. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export default { setup() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } }
143. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' function useCounter() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } export default { setup() { const { state, increment } = useCounter()
144. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' function useCounter() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } export default { setup() { const { state, increment } = useCounter()
145. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan state.count ++ } return { state, increment } } export default { setup() { const { state, increment } = useCounter() return { state, increment } } }
146. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
147. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { reactive, computed } from 'vue' export function useCounter() { const state = reactive({ count: 0, double: computed(() => state.count * 2) }) function increment() { state.count ++ } return { state, increment } } counter.js
148. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state, increment } = useCounter() return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> App.vue
149. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state, increment } = useCounter() return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> App.vue
150. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state, increment } = useCounter() return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> App.vue
151. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state, increment } = useCounter() return { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button> App.vue
152. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state: counter, increment } = useCounter() return { counter, increment } } } <button @click="increment"> Count is: {{ counter.count }}, double is: {{ counter.double }} </button> App.vue
153. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state: counter, increment } = useCounter() return { counter, increment } } } <button @click="increment"> Count is: {{ counter.count }}, double is: {{ counter.double }} </button> App.vue
154. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import { useCounter } from './counter' export default { setup() { const { state: counter, increment } = useCounter() return { counter, increment } } } <button @click="increment"> Count is: {{ counter.count }}, double is: {{ counter.double }} </button> App.vue
155. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan http://vue-composition-api-rfc.netlify.com/
156. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Questions?
157. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Frequently Asked Questions
158. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Do we need to learn TypeScript now?
159. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Does 3.0 break my applications?
160. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Do we have two ways of writing components?
161. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan @znck0
162. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan @gustojs