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.

Rahul Kadyan

August 30, 2019
Tweet

More Decks by Rahul Kadyan

Other Decks in Technology

Transcript

  1. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Platinum

    Sponsor Exhibition Sponsor Community Sponsor
  2. 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 ... } })
  3. 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 ... } })
  4. 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 ... } })
  5. 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?
  6. 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
  7. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan …

    and it works with Map Set WeakMap WeakSet Any Other Class
  8. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Faster

    much faster
 than Object.definePrototype
  9. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6

    v3.0 (prototype) Rendering 3000 stateful component instances
  10. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6

    v3.0 (prototype) Rendering 3000 stateful component instances Double Speed

  11. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6

    v3.0 (prototype) Rendering 3000 stateful component instances 
 Half Memory
  12. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan v2.6

    v3.0 (prototype) Rendering 3000 stateful component instances Double Speed
 Half Memory
  13. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Template

    / DOM <div class="container"> <span>Hello World! </span> </div>
  14. 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>
  15. <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
  16. 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
  17. 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 */ [ ...] )
  18. 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: [ ...] }
  19. 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!’] )] ) }
  20. 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!’] )] ) }
  21. 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
  22. 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
  23. 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
  24. 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
  25. 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, ...) ... }
  26. 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
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. 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
  63. 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. 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
  69. 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
  70. 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
  71. 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
  72. 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
  73. 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
  74. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import

    { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
  75. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import

    { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
  76. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan import

    { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ ... })
  77. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Vue

    3.0 uses TypeScript But you don’t have to!
  78. 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 } } }
  79. 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 } } }
  80. 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 } } }
  81. 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 } } }
  82. 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 } } }
  83. 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 } } }
  84. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return

    { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
  85. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return

    { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
  86. 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 } } }
  87. 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()
  88. 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()
  89. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan state.count

    ++ } return { state, increment } } export default { setup() { const { state, increment } = useCounter() return { state, increment } } }
  90. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan return

    { state, increment } } } <button @click="increment"> Count is: {{ state.count }}, double is: {{ state.double }} </button>
  91. 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
  92. 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
  93. 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
  94. 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
  95. 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
  96. 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
  97. 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
  98. 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
  99. Future of Vue @znck0 JSFoo: VueDay 2019 Rahul Kadyan Do

    we have two ways of writing components?