Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Future of Vue – JSFoo VueDay 2019

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.

1135c452bcb851741181b804cd184972?s=128

Rahul Kadyan

August 30, 2019
Tweet

Transcript

  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