@ -0,0 +1,58 @@
const title = 'Plans for the Next Iteration of Vue.js'
const content = ` <p>Last week at<a href="https://vuejs.london/summary" rel="nofollow">Vue.js London</a>I gave a brief sneak peek of what’
< p > < img class = " wscnph" src = "https://wpimg.wallstcn.com/b8a1d7be-0b73-41b8-be8c-7c01c93cab66.png" data - wscntype = "image" data - wscnh = "742" data - wscnw = "692" / > < / p >
< h3 > Why a new majorversion ? < / h 3 >
< p > Vue 2.0 was released < a href = "https://medium.com/the-vue-point/vue-2-0-is-here-ef1f26acf4b8" rel = "nofollow" > exactly two years ago < / a > ( h o w t i m e f l i e s ! ) . D u r i n g t h i s p e r i o d , t h e c o r e h a s r e m a i n e d b a c k w a r d s c o m p a t i b l e w i t h f i v e m i n o r r e l e a s e s . W e ’ v e a c c u m u l a t e d a n u m b e r o f i d e a s t h a t w o u l d b r i n g i m p r o v e m e n t s , b u t t h e y w e r e h e l d o f f b e c a u s e t h e y w o u l d r e s u l t i n b r e a k i n g c h a n g e s . A t t h e s a m e t i m e , t h e J a v a S c r i p t e c o s y s t e m a n d t h e l a n g u a g e i t s e l f h a s b e e n e v o l v i n g r a p i d l y . T h e r e a r e g r e a t l y i m p r o v e d t o o l s t h a t c o u l d e n h a n c e o u r w o r k f l o w , a n d m a n y n e w l a n g u a g e f e a t u r e s t h a t c o u l d u n l o c k s i m p l e r , m o r e c o m p l e t e , a n d m o r e e f f i c i e n t s o l u t i o n s t o t h e p r o b l e m s V u e i s t r y i n g t o s o l v e . W h a t ’ s m o r e e x c i t i n g i s t h a t w e a r e s e e i n g E S 2 0 1 5 s u p p o r t b e c o m i n g a b a s e l i n e f o r a l l m a j o r e v e r g r e e n b r o w s e r s . V u e 3 . 0 a i m s t o l e v e r a g e t h e s e n e w l a n g u a g e f e a t u r e s t o m a k e V u e c o r e s m a l l e r , f a s t e r , a n d m o r e p o w e r f u l . < / p >
< p > Vue 3.0 is currently in prototyping phase , and we have already implemented a runtime close to feature - parity with 2. x . < strong > Many of the items listed below are either already implemented , or confirmed to be feasible . Ones that are not yet implemented or still in exploration phase are marked with a * . < / s t r o n g > < / p >
< h3 > The Details < / h 3 >
< h4 > High - Level APIChanges < / h 4 >
< blockquote > TL ; DR : Everything except render function API and scoped - slots syntax will either remain the same or can be made 2. x compatible via a compatibility build . < / b l o c k q u o t e >
< p > Since it ’ s a new major , there is going to be some breaking changes . However , we take backwards compatibility seriously , so we want to start communicating these changes as soon as possible . Here ’ s the currently planned public API changes : < / p >
< ul > < li > Template syntax will remain 99 % the same . There may be small tweaks in scoped slots syntax , but other than that we have no plans to change anything else for templates . < / l i > < l i > 3 . 0 w i l l s u p p o r t c l a s s - b a s e d c o m p o n e n t s n a t i v e l y , w i t h t h e a i m t o p r o v i d e a n A P I t h a t i s p l e a s a n t t o u s e i n n a t i v e E S 2 0 1 5 w i t h o u t r e q u i r i n g a n y t r a n s p i l a t i o n o r s t a g e - x f e a t u r e s . M o s t c u r r e n t o p t i o n s w i l l h a v e a r e a s o n a b l e m a p p i n g i n t h e c l a s s - b a s e d A P I . S t a g e - x f e a t u r e s s u c h a s c l a s s f i e l d s a n d d e c o r a t o r s c a n s t i l l b e u s e d o p t i o n a l l y t o e n h a n c e t h e a u t h o r i n g e x p e r i e n c e . I n a d d i t i o n , t h e A P I i s d e s i g n e d w i t h T y p e S c r i p t t y p e i n f e r e n c e i n m i n d . T h e 3 . x c o d e b a s e w i l l i t s e l f b e w r i t t e n i n T y p e S c r i p t , a n d p r o v i d i n g i m p r o v e d T y p e S c r i p t s u p p o r t . ( T h a t s a i d , u s a g e o f T y p e S c r i p t i n a n a p p l i c a t i o n i s s t i l l e n t i r e l y o p t i o n a l . ) < / l i > < l i > T h e 2 . x o b j e c t - b a s e d c o m p o n e n t f o r m a t w i l l s t i l l b e s u p p o r t e d b y i n t e r n a l l y t r a n s f o r m i n g t h e o b j e c t t o a c o r r e s p o n d i n g c l a s s . < / l i > < l i > M i x i n s w i l l s t i l l b e s u p p o r t e d . * < / l i > < l i > T o p l e v e l A P I s w i l l l i k e l y r e c e i v e a n o v e r h a u l t o a v o i d g l o b a l l y m u t a t i n g t h e V u e r u n t i m e w h e n i n s t a l l i n g p l u g i n s . I n s t e a d , p l u g i n s w i l l b e a p p l i e d a n d s c o p e d t o a c o m p o n e n t t r e e . T h i s w i l l m a k e i t e a s i e r t o t e s t c o m p o n e n t s t h a t r e l y o n s p e c i f i c p l u g i n s , a n d a l s o m a k e i t p o s s i b l e t o m o u n t m u l t i p l e V u e a p p l i c a t i o n s o n t h e s a m e p a g e w i t h d i f f e r e n t p l u g i n s , b u t u s i n g t h e s a m e V u e r u n t i m e . * < / l i > < l i > F u n c t i o n a l c o m p o n e n t s c a n f i n a l l y b e p l a i n f u n c t i o n s — h o w e v e r , a s y n c c o m p o n e n t s w i l l n o w n e e d t o b e e x p l i c i t l y c r e a t e d v i a a h e l p e r f u n c t i o n . < / l i > < l i > T h e p a r t t h a t w i l l r e c e i v e t h e m o s t c h a n g e s i s t h e V i r t u a l D O M f o r m a t u s e d i n r e n d e r f u n c t i o n s . W e a r e c u r r e n t l y c o l l e c t i n g f e e d b a c k f r o m m a j o r l i b r a r y a u t h o r s a n d w i l l b e s h a r i n g m o r e d e t a i l s a s w e a r e m o r e c o n f i d e n t o f t h e c h a n g e s , b u t a s l o n g a s y o u d o n ’ t h e a v i l y r e l y o n h a n d - w r i t t e n ( n o n - J S X ) r e n d e r f u n c t i o n s i n y o u r a p p , u p g r a d i n g s h o u l d b e a r e a s o n a b l y s t r a i g h t f o r w a r d p r o c e s s . < / l i > < / u l >
< h4 > Source Code Architecture < / h 4 >
< blockquote > TL ; DR : better decoupled internal modules , TypeScript , and a codebase that is easier to contribute to . < / b l o c k q u o t e >
< p > We are re - writing 3.0 from the ground up for a cleaner and more maintainable architecture , in particular trying to make it easier to contribute to . We are breaking some internal functionalities into individual packages in order to isolate the scope of complexity . For example , the observer module will become its own package , with its own public API and tests . Note this does not affect framework - level API — you will not have to manually import individual bits from multiple packages in order to use Vue . Instead , the final Vue package is assembled using these internal packages . < / p >
< p > The codebase is also now written in TypeScript . Although this will make proficiency in TypeScript a pre - requisite for contributing to the new codebase , we believe the type information and IDE support will actually make it easier for a new contributor to make meaningful contributions . < / p >
< p > Decoupling the observer and scheduler into separate packages also allows us to easily experiment with alternative implementations of these parts . For example , we can implement an IE11 compatible observer implementation with the same API , or an alternative scheduler that leverages < code > requestIdleCallback < / c o d e > t o y i e l d t o t h e b r o w s e r d u r i n g l o n g u p d a t e s . * < / p >
< p > < img class = " wscnph" src = "https://wpimg.wallstcn.com/4d0b5fb2-d7f9-48fd-8f1b-03362b534dd9.png" data - wscntype = "image" data - wscnh = "716" data - wscnw = "460" / > < / p >
< h4 > Observation Mechanism < / h 4 >
< blockquote > TL ; DR : more complete , precise , efficient and debuggable reactivity tracking & amp ; API for creating observables . < / b l o c k q u o t e >
< p > 3.0 will ship with a Proxy - based observer implementation that provides reactivity tracking with full language coverage . This eliminates a number of limitations of Vue 2 ’ s current implementation based on < code > Object . defineProperty < / c o d e > : < / p >
< p > The new observer also features the following : < / p >
< p > Easily understand why a component is re - rendering < / p >
< p > < img class = " wscnph" src = "https://wpimg.wallstcn.com/a0c9d811-1ef9-4628-8976-f7c1aaa66da0.png" data - wscntype = "image" data - wscnh = "540" data - wscnw = "789" / > < / p >
< h4 > Other Runtime Improvements < / h 4 >
< blockquote > TL ; DR : smaller , faster , tree - shakable features , fragments & amp ; portals , custom renderer API . < / b l o c k q u o t e >
< h4 > Compiler Improvements * < / h 4 >
< blockquote > TL ; DR : tree - shaking friendly output , more AOT optimizations , parser with better error info and source map support . < / b l o c k q u o t e >
< h4 > IE11 Support * < / h 4 >
< blockquote > TL ; DR : it will be supported , but in a separate build with the same reactivity limitations of Vue 2. x . < / b l o c k q u o t e >
< p > The new codebase currently targets evergreen browsers only and assumes baseline native ES2015 support . But alas , we know a lot of our users still need to support IE11 for the foreseeable future . Most of the ES2015 features used can be transpiled / polyfilled for IE11 , with the exception for Proxies . Our plan is to implement an alternative observer with the same API , but using the good old ES5 < code > Object . defineProperty < / c o d e > A P I . A s e p a r a t e b u i l d o f V u e 3 . x w i l l b e d i s t r i b u t e d u s i n g t h i s o b s e r v e r i m p l e m e n t a t i o n . H o w e v e r , t h i s b u i l d w i l l b e s u b j e c t t o t h e s a m e c h a n g e d e t e c t i o n c a v e a t s o f V u e 2 . x a n d t h u s n o t f u l l y c o m p a t i b l e w i t h t h e “ m o d e r n ” b u i l d o f 3 . x . W e a r e a w a r e t h a t t h i s i m p o s e s s o m e i n c o n v e n i e n c e f o r l i b r a r y a u t h o r s a s t h e y w i l l n e e d t o b e a w a r e o f c o m p a t i b i l i t y f o r t w o d i f f e r e n t b u i l d s , b u t w e w i l l m a k e s u r e t o p r o v i d e c l e a r g u i d e l i n e s o n t h i s w h e n w e r e a c h t h a t s t a g e . < / p >
< h3 > How Do We GetThere < / h 3 >
< p > First of all , although we are announcing it today , we do not have a definitive timeline yet . What we do know at the moment is the steps we will be taking to get there : < / p >
< h4 > 1. Internal Feedback for the Runtime Prototype < / h 4 >
< p > This is the phase we are in right now . Currently , we already have a working runtime prototype that includes the new observer , Virtual DOM and component implementation . We have invited a group of authors of influential community projects to provide feedback for the internal changes , and would like to make sure they are comfortable with the changes before moving forward . We want to ensure that important libraries in the ecosystem will be ready at the same time when we release 3.0 , so that users relying on those projects can upgrade easily . < / p >
< h4 > 2. Public Feedback viaRFCs < / h 4 >
< p > Once we gain a certain level of confidence in the new design , for each breaking change we will be opening a dedicated RFC issue which includes : < / p >
< p > We will anticipate public feedback from the wider community to help us consolidate these ideas . < / p >
< h4 > 3. Introduce Compatible Features in 2. x & amp ; 2. x - next < / h 4 >
< p > We are not forgetting about 2. x ! In fact , we plan to use 2. x to progressively accustom users to the new changes . We will be gradually introducing confirmed API changes into 2. x via opt - in adaptors , and 2. x - next will allow users to try out the new Proxy - based observer . < / p >
< p > The last minor release in 2. x will become LTS and continue to receive bug and security fixes for 18 months when 3.0 is released . < / p >
< h4 > 4. AlphaPhase < / h 4 >
< p > Next , we will finish up the compiler and server - side rendering parts of 3.0 and start making alpha releases . These will mostly be for stability testing purposes in small greenfield apps . < / p >
< h4 > 5. BetaPhase < / h 4 >
< p > During beta phase , our main goal is updating support libraries and tools like Vue Router , Vuex , Vue CLI , Vue DevTools and make sure they work smoothly with the new core . We will also be working with major library authors from the community to help them get ready for 3.0 . < / p >
< h4 > 6. RCPhase < / h 4 >
< p > Once we consider the API and codebase stable , we will enter RC phase with API freeze . During this phase we will also work on a “ compat build ” : a build of 3.0 that includes compatibility layers for 2. x API . This build will also ship with a flag you can turn on to emit deprecation warnings for 2. x API usage in your app . The compat build can be used as a guide to upgrade your app to 3.0 . < / p >
< h4 > 7. IE11build < / h 4 >
< p > The last task before the final release will be the IE11 compatibility build as mentioned above . < / p >
< h4 > 8. FinalRelease < / h 4 >
< p > In all honesty , we don ’ t know when this will happen yet , but likely in 2019. Again , we care more about shipping something that is solid and stable rather than hitting specific dates . There is a lot of work to be done , but we are excited for what ’ s coming next ! < / p > `
const data = {
title ,
content
}
export default data
Pan