Vue
Please refer to the release blog post and CHANGELOG.md for details.
Draft
Features
- Migration Build: a build of Vue 3 that provides Vue 2 compatible behavior. The Migration Build is intended to help migrating existing Vue 2 apps to Vue 3.
- compiler-core: whitespace handling strategy (dee3d6a)
- support component-level
compilerOptionswhen using runtime compiler (ce0bbe0) - config: support configuring runtime compiler via
app.config.compilerOptions(091e6d6) - support casting plain element to component via is="vue:xxx" (af9e699)
- devtools: improved KeepAlive support (03ae300)
- devtools: performance events (f7c54ca)
- onServerPrefetch (#3070) (349eb0f)
Performance Improvements
- only trigger
$attrsupdate when it has actually changed (5566d39) - compiler: skip unncessary checks when parsing end tag (048ac29)
- avoid deopt for props/emits normalization when global mixins are used (51d2be2)
Deprecations
app.config.isCustomElementhas been deprecated and should be now nested underapp.config.compilerOptions. [Docs]delimiterscomponent option has been deprecated and should now be nested under thecompilerOptionscomponent option. [Docs]v-ishas been deprecated in favor ofis="vue:xxx"[Docs]
Minor Breaking Changes
-
this.$propsand thepropsobject passed tosetup()now always contain all the keys for declared props, even for props that are absent (4fe4de0). This has always been the behavior in Vue 2 and is therefore considered a fix (see reasoning in #3288). However, this could break Vue 3 code that relied on the keys for prop absence checks. The workaround is to use a Symbol default value for props that need absence checks:const isAbsent = Symbol() export default { props: { foo: { default: isAbsent } }, setup(props) { if (props.foo === isAbsent) { // foo is absent } } } -
optionMergeStrategiesfunctions no longer receive
the component instance as the 3rd argument. The argument was technically
internal in Vue 2 and only used for generating warnings, and should not
be needed in userland code. This removal enables much more efficient
caching of option merging.
Bug Fixes
- compat: revert private properties on $options in comapt mode (ad844cf), closes #3883
- runtime-core: fix fragment update inside de-opt slots (5bce2ae), closes #3881
- compat: fix deep data merge with extended constructor (c7efb96), closes #3852
- compiler-sfc: fix style injection when using normal script + setup (8b94464), closes #3688
- compiler-sfc: fix template expression assignment codegen for script setup let refs (#3626) (2c7bd42), closes #3625
- runtime-core: align option merge behavior with Vue 2 (e2ca67b), closes #3566 #2791
- runtime-dom/v-model: only set selectedIndex when the value changes (#3845) (ecd97ee)
- suspense: fix suspense regression for errored template component (44996d1), closes #3857
- watch: avoid traversing objects that are marked non-reactive (9acc9a1)
- compiler-core: improve the isMemberExpression function (#3675) (9b2e894)
- compiler-dom: fix in-browser attribute value decoding w/ html tags (6690372), closes #3001
- compiler-sfc: correctly remove parens used for wrapping (#3582) (6bfb50a), closes #3581
- reactivity: ensure computed always expose value (03a7a73), closes #3099 #910
- runtime-core: fix cases of reused children arrays in render functions (#3670) (a641eb2), closes #3666
- runtime-core: fix resolving inheritAttrs from mixins (#3742) (d6607c9), closes #3741
- runtime-core: should disable tracking inside directive lifecycle hooks (#3699) (ff50e8d)
- runtime-core: stricter compat root mount check (32e2133)
- runtime-dom: should remove attribute when binding
nulltovalue(#3564) (e3f5dcb) - suspense: fix suspense patching in optimized mode (9f24195), closes #3828
- transition: fix higher order transition components with merged listeners (071986a), closes #3227
- keep-alive: include/exclude should work with async component (#3531) (9e3708c), closes #3529
- runtime-core: properly check forwarded slots type (#3781) (e8ddf86), closes #3779
- runtime-core: should not track dynamic children when the user calls a compiled slot inside template expression (#3554) (2010607), closes #3548 #3569
- runtime-core/teleport: ensure the nested teleport can be unmounted correctly (#3629) (4e3f82f), closes #3623
- scheduler: handle preFlush cb queued inside postFlush cb (b57e995), closes #3806
- ssr: handle hydrated async component unmounted before resolve (b46a4dc), closes #3787
- watch: should not leak this context to setup watch getters (1526f94), closes #3603
- compat: avoid accidentally delete the modelValue prop (#3772) (4f17be7)
- compat: enum coercion warning (#3755) (f01aadf)
- compiler-core: fix whitespace management for slots with whitespace: 'preserve' (#3767) (47da921), closes #3766
- compiler-dom: comments in the v-if branchs should be ignored when used in Transition (#3622) (7c74feb), closes #3619
- compiler-sfc: support tsx in setup script (#3825) (01e8ba8), closes #3808
- compiler-ssr: disable hoisting in compiler-ssr (3ef1fcc), closes #3536
- devtools: send update to component owning the slot (1355ee2)
- runtime-core: avoid double-setting props when casting (0255be2), closes #3371 #3384
- runtime-core: avoid the proxy object polluting the slots of the internal instance (#3698) (4ce0df6), closes #3695
- types: declared prop keys should always exist in
propsargument (#3726) (9b160b9) - types/reactivity: error TS4058 caused by
RefSymbol(#2548) (90aa835) - compat: correctly merge lifecycle hooks when using Vue.extend (#3762) (2bfb8b5), closes #3761
- compiler-core: bail out to array children when the element has custom directives + only one text child node (#3757) (a56ab14)
- compat: handle and warn config.optionMergeStrategies (94e69fd)
- compiler-core: preserve comment content in production when comments option is enabled (e486254)
- hmr: don't remove __file key from component type (9db3cbb)
- hydration: fix update before async component is hydrated (#3563) (c8d9683), closes #3560
- reactivity: fix tracking for readonly + reactive Map (#3604) (5036c51), closes #3602
- runtime-core: ensure declare prop keys are always present (4fe4de0), closes #3288
- runtime-core: watching multiple sources: computed (#3066) (e7300eb), closes #3068
- Teleport: avoid changing the reference of vnode.dynamicChildren (#3642) (43f7815), closes #3641
- watch: avoid traversing non-plain objects (62b8f4a)
- watch: this.$watch should support watching keypath (870f2a7)
Draft
Today we are proud to announce the official release of Vue.js 3.0 "One Piece". This new major version of the framework provides improved performance, smaller bundle sizes, better TypeScript integration, new APIs for tackling large scale use cases, and a solid foundation for long-term future iterations of the framework.
The 3.0 release represents over 2 years of development efforts, featuring 30+ RFCs, 2,600+ commits, 628 pull requests from 99 contributors, plus tremendous amount of development and documentation work outside of the core repo. We would like to express our deepest gratitude towards our team members for taking on this challenge, our contributors for the pull requests, our sponsors and backers for the financial support, and the wider community for participating in our design discussions and providing feedback for the pre-release versions. Vue is an independent project created for the community and sustained by the community, and Vue 3.0 wouldn't have been possible without your consistent support.
Taking the "Progressive Framework" Concept Further
Vue had a simple mission from its humble beginning: to be an approachable framework that anyone can quickly learn. As our user base grew, the framework also grew in scope to adapt to the increasing demands. Over time, it evolved into what we call a "Progressive Framework": a framework that can be learned and adopted incrementally, while providing continued support as the user tackles more and more demanding scenarios.
Today, with over 1.3 million users worldwide*, we are seeing Vue being used in a wildly diverse range of scenarios, from sprinkling interactivity on traditional server-rendered pages, to full-blown single page applications with hundreds of components. Vue 3 takes this flexibility even further.
Layered internal modules
Vue 3.0 core can still be used via a simple <script> tag, but its internals has been re-written from the ground up into a collection of decoupled modules. The new architecture provides better maintainability, and allows end users to shave off up to half of the runtime size via tree-shaking.
These modules also exposes lower-level APIs that unlocks many advanced use cases:
- The compiler supports custom AST transforms for build-time customizations (e.g. build-time i18n)
- The core runtime provides first-class API for creating custom renderers targeting different render targets (e.g. native mobile, WebGL or terminals). The default DOM renderer is built using the same API.
- The
@vue/reactivitymodule exports functions that provide direct access to Vue's reactivity system, and can be used as a standalone package. It can be used to pair with other templating solutions (e.g. lit-html) or even in non-UI scenarios.
New APIs for tackling scale
The 2.x Object-based API is largely intact in Vue 3. However, 3.0 also introduces the Composition API - a new set of APIs aimed at addressing the pain points of Vue usage in large scale applications. The Composition API builds on top of the reactivity API and enables logic composition and reuse similar to React hooks, more flexible code organization patterns, and more reliable type inference than the 2.x Object-based API.
Composition API can also be used with Vue 2.x via the @vue/composition-api plugin, and there are already Composition API utility libraries that work for both Vue 2 and 3 (e.g. vueuse, vue-composable).
Performance Improvements
Vue 3 has demonstrated significant performance improvements over Vue 2 in terms of bundle size (up to 41% lighter with tree-shaking), initial render (up to 55% faster), updates (up to 133% faster), and memory usage (up to 54% less).
In Vue 3, we have taken the approach of "compiler-informed Virtual DOM": the template compiler performs aggressive optimizations and generates render function code that hoists static content, leaves runtime hints for binding types, and most importantly, flattens the dynamic nodes inside a template to reduce the cost of runtime traversal. The user therefore gets the best of both worlds: compiler-optimized performance from templates, or direct control via manual render functions when the use case demands.
Improved TypeScript integration
Vue 3's codebase is written in TypeScript, with automatically generated, tested, and bundled type definitions so they are always up-to-date. Composition API works great with type inference. Vetur, our official VSCode extension, now supports template expression and props type checking leveraging Vue 3's improved internal typing. Oh, and Vue 3's typing fully supports TSX if that's your preference.
Experimental Features
We have proposed two new features for Singe-File Components (SFC, aka .vue files):
<script setup>: syntactic sugar for using Composition API inside SFCs<style vars>: state-driven CSS variables inside SFCs
These features are already implemented and available in Vue 3.0, but are provided only for the purpose of gathering feedback. They will remain experimental until the RFCs are merged.
We have also implemented a currently undocumented <Suspense> component, which allows waiting on nested async dependencies (async components or component with async setup()) on initial render or branch switch. We are testing and iterating on this feature with the Nuxt.js team (Nuxt 3 is on the way) and will likely solidify it in 3.1.
Phased Release Process
The release of Vue 3.0 marks the general readiness of the framework. While some of the frameworks sub projects may still need further work to reach stable status (specifically router and Vuex integration in the devtools), we believe it's suitable to start new, green-field projects with Vue 3 today. We also encourage library authors to start upgrading your projects to support Vue 3.
Check out the Vue 3 Libraries Guide for details on all framework sub projects.
Migration and IE11 Support
We have pushed back the migration build (v3 build with v2 compatible behavior + migration warnings) and the IE11 build due to time constraints, and are aiming to focus on them in Q4 2020. Therefore, users planning to migrate an existing v2 app or require IE11 support should be aware of these limitations at this time.
Next Steps
For the near term after release, we will focus on:
- Migration build
- IE11 support
- Router and Vuex integration in new devtools
- Further improvements to template type inference in Vetur
For the time being, the documentation websites, GitHub branches, and npm dist tags for Vue 3 and v3-targeting projects will remain under next-denoted status. This means npm install vue will still install Vue 2.x and npm install vue@next will install Vue 3. We are planning to switch all doc links, branches and dist tags to default to 3.0 by end of 2020.
At the same time, we have started planning for 2.7, which will be the last planned minor release of the 2.x release line. 2.7 will be backporting compatible improvements from v3, and emit warnings on usage of APIs that are removed/changed in v3 to help with potential migration. We are planning to work on 2.7 in Q1 2021, which will directly become LTS upon release with an 18 months maintenance lifespan.
Trying It Out
To learn more about Vue 3.0, check out our new documentation website. If you are an existing Vue 2.x user, go directly to the Migration Guide.
- *based on Vue Devtools Chrome extension weekly active users as reported by Google.
Draft
Please refer to CHANGELOG.md for details.
Draft
Basic SSR support is now provided via @vue/compiler-ssr and @vue/server-renderer. Note that some features of SSR is still WIP - namely Suspense support and hydration mismatch handling.
Note that to enable hydration on the client, use createSSRApp instead of createApp to create your app instance (separate imports allows hydration logic to be tree-shakeable for apps that do not require hydration).
Draft