Vue 3,0 Updates

1. Vue 3.0 Updates Evan You VueConf TO, Nov. 2018
2. What’s coming in Vue 3.0 ● Make it faster Make it smaller Make it more maintainable Make it easier to target native Make your life easier
3. Make it faster
4. Virtual DOM implementation rewritten from the ground up Up to 100% faster mounting & patching
5. More compile-time hints to reduce runtime overhead
6. Component fast path + Monomorphic calls + Children type detection Template <Comp></Comp> <div> <span></span> </div> Compiler output 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 */) } ● Skip unnecessary condition branches ● Easier for JavaScript engine to optimize
7. Optimized Slots Generation Template <Comp> <div>{{ hello }}</div> </Comp> Compiler output render() { return h(Comp, null, { default: () => [h('div', this.hello)] }, 16 /* compiler generated slots */) } ● Ensure dependencies are tracked by correct instance ● Avoid unnecessary parent / children re-renders
8. Static Tree Hoisting Template Compiler output <div> const __static1 = h('span', { <span class="foo"> class: 'foo' Static }, 'static') </span> <span> {{ dynamic }} render() { return h('div', [ </span> </div> __static1, h('span', this.dynamic) ]) ● Skip patching entire trees } ● Works even with multiple occurrences
9. Static Props Hoisting Template <div id="foo" class="bar"> {{ text }} </div> Compiler output const __props1 = { id: 'foo', class: 'bar' } render() { return h('div', __props1, this.text) } ● Skip patching the node itself, but keep patching children
10. Inline Handler Hoisting Template <Comp @event="count++"/> ● Avoid unnecessary rerenders due to different inline function identity Compiler output import { getBoundMethod } from 'vue' function __fn1 () { this.count++ } render() { return h(Comp, { onEvent: getBoundMethod(__fn1, this) }) }
11. Proxy-based observation mechanism with full language coverage + better perf ● Property addition / deletion ● Array index / length mutation ● Map, Set, WeakMap, WeakSet ● Classes
12. Faster instance property proxying using native Proxy Bye Object.defineProperty!
13. Up to 100% faster Component instance initialization
14. Double the speed Half the memory usage
15. v2.5 v3.0proto ● Rendering 3000 stateful component instances
16. Make it smaller
17. Tree-shaking Friendly ● Built-in components (keep-alive, transition…) ● Template directive runtime helpers (v-model, v- for…) ● Utility functions (asyncComponent, mixins, memoize...)
18. New core runtime: ~10kb gzipped
19. Make it more maintainable
20. Flow -> TypeScript
21. Decoupled Packages
22. Compiler Rewrite ● Pluggable architecture ● Parser w/ location info (source maps!) ● Serve as infrastructure for more robust IDE support
23. Make it easier to target native
24. Custom Renderer API import { createRenderer } from '@vue/runtime-core' const { render } = createRenderer({ nodeOps, patchData })
25. Make your life easier
26. Exposed reactivity API import { observable, effect } from 'vue' const state = observable({ count: 0 }) effect(() => { console.log(`count is: ${state.count}`) }) // count is: 0 state.count++ // count is: 1
27. Easily identify why a component is re-rendering Demo const Comp = { render(props) { return h('div', props.count) }, renderTriggered(event) { debugger } }
28. Improved TypeScript Support w/ TSX Demo interface HelloProps { text: string } class Hello extends Component<HelloProps> { count = 0 render() { return <div> {this.count} {this.$props.text} </div> } }
29. Better warning traces ● Now includes functional components ● Inspectable props ● Traces are available in more warning cases Demo
30. Experimental Hooks API Demo
31. Experimental Time Slicing Support Demo
32. But how about IE? TL;DR: IE11 will be supported
33. Thank you!