Vue 3,0 Updates

2020-02-27 100浏览

  • 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 TemplateCompiler 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{{ hello }}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 outputconst __static1 = h('span', {class:'foo' Static }, 'static'){{ dynamic }} render() { return h('div', [__static1, h('span', this.dynamic) ]) ● Skip patching entire trees } ● Works even with multiple occurrences
  • 9.Static Props Hoisting Template{{ text }}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● 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 coreruntime:~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(`countis:'>is: