CINXE.COM
<!doctype html><html lang="en"><head><title data-rh="true">Plans for the Next Iteration of Vue.js | by Evan You | The Vue Point | Medium</title><meta data-rh="true" charset="utf-8"/><meta data-rh="true" name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1,maximum-scale=1"/><meta data-rh="true" name="theme-color" content="#000000"/><meta data-rh="true" name="twitter:app:name:iphone" content="Medium"/><meta data-rh="true" name="twitter:app:id:iphone" content="828256236"/><meta data-rh="true" property="al:ios:app_name" content="Medium"/><meta data-rh="true" property="al:ios:app_store_id" content="828256236"/><meta data-rh="true" property="al:android:package" content="com.medium.reader"/><meta data-rh="true" property="fb:app_id" content="542599432471018"/><meta data-rh="true" property="og:site_name" content="Medium"/><meta data-rh="true" property="og:type" content="article"/><meta data-rh="true" property="article:published_time" content="2019-06-11T07:51:39.776Z"/><meta data-rh="true" name="title" content="Plans for the Next Iteration of Vue.js | by Evan You | The Vue Point | Medium"/><meta data-rh="true" property="og:title" content="Plans for the Next Iteration of Vue.js"/><meta data-rh="true" property="al:android:url" content="medium://p/777ffea6fabf"/><meta data-rh="true" property="al:ios:url" content="medium://p/777ffea6fabf"/><meta data-rh="true" property="al:android:app_name" content="Medium"/><meta data-rh="true" name="description" content="Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan. Vue 2.0 was released exactly two years ago…"/><meta data-rh="true" property="og:description" content="Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth…"/><meta data-rh="true" property="og:url" content="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf"/><meta data-rh="true" property="al:web:url" content="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf"/><meta data-rh="true" property="og:image" content="https://miro.medium.com/v2/resize:fit:1051/1*vFC8tDUGLlXIiqT7ymf3xg.png"/><meta data-rh="true" property="article:author" content="https://medium.com/@youyuxi"/><meta data-rh="true" name="author" content="Evan You"/><meta data-rh="true" name="robots" content="index,noarchive,follow,max-image-preview:large"/><meta data-rh="true" name="referrer" content="unsafe-url"/><meta data-rh="true" property="twitter:title" content="Plans for the Next Iteration of Vue.js"/><meta data-rh="true" name="twitter:site" content="@vuejs"/><meta data-rh="true" name="twitter:app:url:iphone" content="medium://p/777ffea6fabf"/><meta data-rh="true" property="twitter:description" content="Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth…"/><meta data-rh="true" name="twitter:image:src" content="https://miro.medium.com/v2/resize:fit:1051/1*vFC8tDUGLlXIiqT7ymf3xg.png"/><meta data-rh="true" name="twitter:card" content="summary_large_image"/><meta data-rh="true" name="twitter:creator" content="@youyuxi"/><meta data-rh="true" name="twitter:label1" content="Reading time"/><meta data-rh="true" name="twitter:data1" content="9 min read"/><link data-rh="true" rel="icon" href="https://miro.medium.com/v2/5d8de952517e8160e40ef9841c781cdc14a5db313057fa3c3de41c6f5b494b19"/><link data-rh="true" rel="search" type="application/opensearchdescription+xml" title="Medium" href="/osd.xml"/><link data-rh="true" rel="apple-touch-icon" sizes="152x152" href="https://miro.medium.com/v2/resize:fill:304:304/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="120x120" href="https://miro.medium.com/v2/resize:fill:240:240/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="76x76" href="https://miro.medium.com/v2/resize:fill:152:152/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="apple-touch-icon" sizes="60x60" href="https://miro.medium.com/v2/resize:fill:120:120/10fd5c419ac61637245384e7099e131627900034828f4f386bdaa47a74eae156"/><link data-rh="true" rel="mask-icon" href="https://miro.medium.com/v2/resize:fill:1000:1000/7*GAOKVe--MXbEJmV9230oOQ.png" color="#171717"/><link data-rh="true" rel="preconnect" href="https://glyph.medium.com" crossOrigin=""/><link data-rh="true" id="glyph_preload_link" rel="preload" as="style" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" id="glyph_link" rel="stylesheet" type="text/css" href="https://glyph.medium.com/css/unbound.css"/><link data-rh="true" rel="author" href="https://medium.com/@youyuxi"/><link data-rh="true" rel="canonical" href="https://medium.com/the-vue-point/plans-for-the-next-iteration-of-vue-js-777ffea6fabf"/><link data-rh="true" rel="alternate" href="android-app://com.medium.reader/https/medium.com/p/777ffea6fabf"/><script data-rh="true" type="application/ld+json">{"@context":"http:\u002F\u002Fschema.org","@type":"NewsArticle","image":["https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:1200\u002F1*vFC8tDUGLlXIiqT7ymf3xg.png"],"url":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf","dateCreated":"2018-09-30T13:52:46.095Z","datePublished":"2018-09-30T13:52:46.095Z","dateModified":"2023-04-21T21:18:31.740Z","headline":"Plans for the Next Iteration of Vue.js - The Vue Point - Medium","name":"Plans for the Next Iteration of Vue.js - The Vue Point - Medium","description":"Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan. Vue 2.0 was released exactly two years ago…","identifier":"777ffea6fabf","author":{"@type":"Person","name":"Evan You","url":"https:\u002F\u002Fmedium.com\u002F@youyuxi"},"creator":["Evan You"],"publisher":{"@type":"Organization","name":"The Vue Point","url":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point","logo":{"@type":"ImageObject","width":272,"height":60,"url":"https:\u002F\u002Fmiro.medium.com\u002Fv2\u002Fresize:fit:544\u002F7*V1_7XP4snlmqrc_0Njontw.png"}},"mainEntityOfPage":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf"}</script><style type="text/css" data-fela-rehydration="568" data-fela-type="STATIC">html{box-sizing:border-box;-webkit-text-size-adjust:100%}*, *:before, *:after{box-sizing:inherit}body{margin:0;padding:0;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;color:rgba(0,0,0,0.8);position:relative;min-height:100vh}h1, h2, h3, h4, h5, h6, dl, dd, ol, ul, menu, figure, blockquote, p, pre, form{margin:0}menu, ol, ul{padding:0;list-style:none;list-style-image:none}main{display:block}a{color:inherit;text-decoration:none}a, button, input{-webkit-tap-highlight-color:transparent}img, svg{vertical-align:middle}button{background:transparent;overflow:visible}button, input, optgroup, select, textarea{margin:0}:root{--reach-tabs:1;--reach-menu-button:1}#speechify-root{font-family:Sohne, sans-serif}div[data-popper-reference-hidden="true"]{visibility:hidden;pointer-events:none}.grecaptcha-badge{visibility:hidden} /*XCode style (c) Angel Garcia <angelgarcia.mail@gmail.com>*/.hljs {background: #fff;color: black; }/* Gray DOCTYPE selectors like WebKit */ .xml .hljs-meta {color: #c0c0c0; }.hljs-comment, .hljs-quote {color: #007400; }.hljs-tag, .hljs-attribute, .hljs-keyword, .hljs-selector-tag, .hljs-literal, .hljs-name {color: #aa0d91; }.hljs-variable, .hljs-template-variable {color: #3F6E74; }.hljs-code, .hljs-string, .hljs-meta .hljs-string {color: #c41a16; }.hljs-regexp, .hljs-link {color: #0E0EFF; }.hljs-title, .hljs-symbol, .hljs-bullet, .hljs-number {color: #1c00cf; }.hljs-section, .hljs-meta {color: #643820; }.hljs-title.class_, .hljs-class .hljs-title, .hljs-type, .hljs-built_in, .hljs-params {color: #5c2699; }.hljs-attr {color: #836C28; }.hljs-subst {color: #000; }.hljs-formula {background-color: #eee;font-style: italic; }.hljs-addition {background-color: #baeeba; }.hljs-deletion {background-color: #ffc8bd; }.hljs-selector-id, .hljs-selector-class {color: #9b703f; }.hljs-doctag, .hljs-strong {font-weight: bold; }.hljs-emphasis {font-style: italic; } </style><style type="text/css" data-fela-rehydration="568" data-fela-type="KEYFRAME">@-webkit-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@-moz-keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}@keyframes k1{0%{opacity:0.8}50%{opacity:0.5}100%{opacity:0.8}}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE">.a{font-family:medium-content-sans-serif-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif}.b{font-weight:400}.c{background-color:rgba(255, 255, 255, 1)}.l{display:block}.m{position:sticky}.n{top:0}.o{z-index:500}.p{padding:0 24px}.q{align-items:center}.r{border-bottom:solid 1px #F2F2F2}.y{height:41px}.z{line-height:20px}.ab{display:flex}.ac{height:57px}.ae{flex:1 0 auto}.af{color:inherit}.ag{fill:inherit}.ah{font-size:inherit}.ai{border:inherit}.aj{font-family:inherit}.ak{letter-spacing:inherit}.al{font-weight:inherit}.am{padding:0}.an{margin:0}.ao{cursor:pointer}.ap:disabled{cursor:not-allowed}.aq:disabled{color:#6B6B6B}.ar:disabled{fill:#6B6B6B}.au{width:auto}.av path{fill:#242424}.aw{height:25px}.ax{margin-left:16px}.ay{border:none}.az{border-radius:20px}.ba{width:240px}.bb{background:#F9F9F9}.bc path{fill:#6B6B6B}.be{outline:none}.bf{font-family:sohne, "Helvetica Neue", Helvetica, Arial, sans-serif}.bg{font-size:14px}.bh{width:100%}.bi{padding:10px 20px 10px 0}.bj{background-color:transparent}.bk{color:#242424}.bl::placeholder{color:#6B6B6B}.bm{display:inline-block}.bn{margin-left:12px}.bo{margin-right:12px}.bp{border-radius:4px}.bq{margin-left:24px}.br{height:24px}.bx{background-color:#F9F9F9}.by{border-radius:50%}.bz{height:32px}.ca{width:32px}.cb{justify-content:center}.ch{max-width:680px}.ci{min-width:0}.cj{animation:k1 1.2s ease-in-out infinite}.ck{height:100vh}.cl{margin-bottom:16px}.cm{margin-top:48px}.cn{align-items:flex-start}.co{flex-direction:column}.cp{justify-content:space-between}.cq{margin-bottom:24px}.cw{width:80%}.cx{background-color:#F2F2F2}.dd{height:44px}.de{width:44px}.df{margin:auto 0}.dg{margin-bottom:4px}.dh{height:16px}.di{width:120px}.dj{width:80px}.dp{margin-bottom:8px}.dq{width:96%}.dr{width:98%}.ds{width:81%}.dt{margin-left:8px}.du{color:#6B6B6B}.dv{font-size:13px}.dw{height:100%}.ep{color:#FFFFFF}.eq{fill:#FFFFFF}.er{background:rgba(24, 156, 104, 1)}.es{border-color:rgba(24, 156, 104, 1)}.ew:disabled{cursor:inherit !important}.ex:disabled{opacity:0.3}.ey:disabled:hover{background:rgba(24, 156, 104, 1)}.ez:disabled:hover{border-color:rgba(24, 156, 104, 1)}.fa{border-radius:99em}.fb{border-width:1px}.fc{border-style:solid}.fd{box-sizing:border-box}.fe{text-decoration:none}.ff{text-align:center}.fi{margin-right:32px}.fj{position:relative}.fk{fill:#6B6B6B}.fn{background:transparent}.fo svg{margin-left:4px}.fp svg{fill:#6B6B6B}.fr{box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.05)}.fs{position:absolute}.fz{margin:0 24px}.gd{background:rgba(255, 255, 255, 1)}.ge{border:1px solid #F2F2F2}.gf{box-shadow:0 1px 4px #F2F2F2}.gg{max-height:100vh}.gh{overflow-y:auto}.gi{left:0}.gj{top:calc(100vh + 100px)}.gk{bottom:calc(100vh + 100px)}.gl{width:10px}.gm{pointer-events:none}.gn{word-break:break-word}.go{word-wrap:break-word}.gp:after{display:block}.gq:after{content:""}.gr:after{clear:both}.gs{line-height:1.23}.gt{letter-spacing:0}.gu{font-style:normal}.gv{font-weight:700}.ia{align-items:baseline}.ib{width:48px}.ic{height:48px}.id{border:2px solid rgba(255, 255, 255, 1)}.ie{z-index:0}.if{box-shadow:none}.ig{border:1px solid rgba(0, 0, 0, 0.05)}.ih{margin-left:-12px}.ii{width:28px}.ij{height:28px}.ik{z-index:1}.il{width:24px}.im{margin-bottom:2px}.in{flex-wrap:nowrap}.io{font-size:16px}.ip{line-height:24px}.ir{margin:0 8px}.is{display:inline}.it{color:rgba(24, 156, 104, 1)}.iu{fill:rgba(24, 156, 104, 1)}.ix{flex:0 0 auto}.ja{flex-wrap:wrap}.jb{white-space:pre-wrap}.jc{margin-right:4px}.jd{overflow:hidden}.je{max-height:20px}.jf{text-overflow:ellipsis}.jg{display:-webkit-box}.jh{-webkit-line-clamp:1}.ji{-webkit-box-orient:vertical}.jj{word-break:break-all}.jl{padding-left:8px}.jm{padding-right:8px}.kn> *{flex-shrink:0}.ko{overflow-x:scroll}.kp::-webkit-scrollbar{display:none}.kq{scrollbar-width:none}.kr{-ms-overflow-style:none}.ks{width:74px}.kt{flex-direction:row}.ku{z-index:2}.kx{-webkit-user-select:none}.ky{border:0}.kz{fill:rgba(117, 117, 117, 1)}.lc{outline:0}.ld{user-select:none}.le> svg{pointer-events:none}.ln{cursor:progress}.lo{margin-left:4px}.lp{margin-top:0px}.lq{opacity:1}.lr{padding:4px 0}.lu{width:16px}.lw{display:inline-flex}.mc{max-width:100%}.md{padding:8px 2px}.me svg{color:#6B6B6B}.mv{line-height:1.58}.mw{letter-spacing:-0.004em}.mx{font-family:source-serif-pro, Georgia, Cambria, "Times New Roman", Times, serif}.ns{margin-bottom:-0.46em}.nt{text-decoration:underline}.nu{margin-left:auto}.nv{margin-right:auto}.nw{max-width:1051px}.oc{clear:both}.oe{cursor:zoom-in}.of{z-index:auto}.oh{height:auto}.oi{line-height:1.12}.oj{letter-spacing:-0.022em}.ok{font-weight:600}.pf{margin-bottom:-0.28em}.pl{line-height:1.18}.pz{margin-bottom:-0.31em}.qa{box-shadow:inset 3px 0 0 0 #242424}.qb{padding-left:23px}.qc{margin-left:-20px}.qd{font-style:italic}.qe{list-style-type:disc}.qf{margin-left:30px}.qg{padding-left:0px}.qm{padding:2px 4px}.qn{font-size:75%}.qo> strong{font-family:inherit}.qp{font-family:source-code-pro, Menlo, Monaco, "Courier New", Courier, monospace}.qq{max-width:460px}.qr{margin-top:10px}.qs{max-width:728px}.qv{max-width:2824px}.qw{margin-bottom:26px}.qx{margin-top:6px}.qy{margin-top:8px}.qz{margin-right:8px}.ra{padding:8px 16px}.rb{border-radius:100px}.rc{transition:background 300ms ease}.re{white-space:nowrap}.rf{border-top:none}.rg{margin-bottom:50px}.rh{height:52px}.ri{max-height:52px}.rj{box-sizing:content-box}.rk{position:static}.rm{max-width:155px}.rs{margin-right:20px}.rt{margin-bottom:64px}.ru{margin-bottom:48px}.si{border-radius:2px}.sk{height:64px}.sl{width:64px}.sm{align-self:flex-end}.sn{flex:1 1 auto}.st{padding-right:4px}.su{font-weight:500}.tb{margin-top:16px}.tc{color:rgba(255, 255, 255, 1)}.td{fill:rgba(255, 255, 255, 1)}.te{background:rgba(25, 25, 25, 1)}.tf{border-color:rgba(25, 25, 25, 1)}.ti:disabled{opacity:0.1}.tj:disabled:hover{background:rgba(25, 25, 25, 1)}.tk:disabled:hover{border-color:rgba(25, 25, 25, 1)}.tq{height:0px}.tr{gap:18px}.ts{fill:rgba(61, 61, 61, 1)}.tu{padding-bottom:6px}.tv{border-bottom:1px solid #F2F2F2}.ub{margin-top:32px}.uc{fill:#242424}.ud{background:0}.ue{border-color:#242424}.uf:disabled:hover{color:#242424}.ug:disabled:hover{fill:#242424}.uh:disabled:hover{border-color:#242424}.us{border-bottom:solid 1px #E5E5E5}.ut{margin-top:72px}.uu{padding:24px 0}.uv{margin-bottom:0px}.uw{margin-right:16px}.as:hover:not(:disabled){color:rgba(25, 25, 25, 1)}.at:hover:not(:disabled){fill:rgba(25, 25, 25, 1)}.et:hover{background:rgba(38, 133, 91, 1)}.eu:hover{border-color:rgba(38, 133, 91, 1)}.ev:hover{cursor:pointer}.fl:hover{color:#242424}.fm:hover{fill:#242424}.fq:hover svg{fill:#242424}.ft:hover{background-color:rgba(0, 0, 0, 0.1)}.iq:hover{text-decoration:underline}.iv:hover:not(:disabled){color:rgba(38, 133, 91, 1)}.iw:hover:not(:disabled){fill:rgba(38, 133, 91, 1)}.lb:hover{fill:rgba(8, 8, 8, 1)}.ls:hover{fill:#000000}.lt:hover p{color:#000000}.lv:hover{color:#000000}.mf:hover svg{color:#000000}.rd:hover{background-color:#F2F2F2}.sj:hover{background-color:none}.tg:hover{background:#000000}.th:hover{border-color:#242424}.tt:hover{fill:rgba(25, 25, 25, 1)}.bd:focus-within path{fill:#242424}.la:focus{fill:rgba(8, 8, 8, 1)}.mg:focus svg{color:#000000}.og:focus{transform:scale(1.01)}.lf:active{border-style:none}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (min-width: 1080px)">.d{display:none}.bw{width:64px}.cg{margin:0 64px}.cv{height:48px}.dc{margin-bottom:52px}.do{margin-bottom:48px}.ef{font-size:14px}.eg{line-height:20px}.em{font-size:13px}.eo{padding:5px 12px}.fh{display:flex}.fy{margin-bottom:50px}.gc{max-width:680px}.hq{font-size:42px}.hr{margin-top:1.19em}.hs{margin-bottom:32px}.ht{line-height:52px}.hu{letter-spacing:-0.011em}.hz{align-items:center}.jz{border-top:solid 1px #F2F2F2}.ka{border-bottom:solid 1px #F2F2F2}.kb{margin:32px 0 0}.kc{padding:3px 8px}.kl> *{margin-right:24px}.km> :last-child{margin-right:0}.lm{margin-top:0px}.mb{margin:0}.no{font-size:20px}.np{margin-top:2.14em}.nq{line-height:32px}.nr{letter-spacing:-0.003em}.ob{margin-top:56px}.pb{font-size:24px}.pc{margin-top:1.95em}.pd{line-height:30px}.pe{letter-spacing:-0.016em}.pk{margin-top:0.94em}.pw{margin-top:1.72em}.px{line-height:24px}.py{letter-spacing:0}.ql{margin-top:1.14em}.rr{display:inline-block}.rv{flex-direction:row}.ry{margin-bottom:0}.rz{margin-right:20px}.so{max-width:500px}.tp{margin-bottom:88px}.ua{margin:40px 0 16px}.um{width:min-width}.ur{padding-top:72px}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (max-width: 1079.98px)">.e{display:none}.ll{margin-top:0px}.qt{margin-left:auto}.qu{text-align:center}.rq{display:inline-block}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (max-width: 903.98px)">.f{display:none}.lk{margin-top:0px}.rp{display:inline-block}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (max-width: 727.98px)">.g{display:none}.li{margin-top:0px}.lj{margin-right:0px}.ro{display:inline-block}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (max-width: 551.98px)">.h{display:none}.s{display:flex}.t{justify-content:space-between}.bs{width:24px}.cc{margin:0 24px}.cr{height:40px}.cy{margin-bottom:44px}.dk{margin-bottom:32px}.dx{font-size:13px}.dy{line-height:20px}.eh{padding:0px 8px 1px}.fu{margin-bottom:2px}.gw{font-size:32px}.gx{margin-top:1.01em}.gy{margin-bottom:24px}.gz{line-height:38px}.ha{letter-spacing:-0.014em}.hv{align-items:flex-start}.iy{flex-direction:column}.jn{margin:24px -24px 0}.jo{padding:0}.kd> *{margin-right:8px}.ke> :last-child{margin-right:24px}.kv{margin-left:0px}.lg{margin-top:0px}.lh{margin-right:0px}.lx{margin:0}.mh{border:1px solid #F2F2F2}.mi{border-radius:99em}.mj{padding:0px 16px 0px 12px}.mk{height:38px}.ml{align-items:center}.mn svg{margin-right:8px}.my{font-size:18px}.mz{margin-top:1.56em}.na{line-height:28px}.nb{letter-spacing:-0.003em}.nx{margin-top:40px}.ol{font-size:20px}.om{margin-top:1.2em}.on{line-height:24px}.oo{letter-spacing:0}.pg{margin-top:0.67em}.pm{font-size:16px}.pn{margin-top:1.23em}.qh{margin-top:1.34em}.rn{display:inline-block}.sg{margin-bottom:20px}.sh{margin-right:0}.ss{max-width:100%}.sv{font-size:24px}.sw{line-height:30px}.sx{letter-spacing:-0.016em}.tl{margin-bottom:64px}.tw{margin:32px 0 16px}.ui{width:100%}.un{padding-top:48px}.mm:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (min-width: 904px) and (max-width: 1079.98px)">.i{display:none}.bv{width:64px}.cf{margin:0 64px}.cu{height:48px}.db{margin-bottom:52px}.dn{margin-bottom:48px}.ed{font-size:14px}.ee{line-height:20px}.ek{font-size:13px}.el{padding:5px 12px}.fg{display:flex}.fx{margin-bottom:50px}.gb{max-width:680px}.hl{font-size:42px}.hm{margin-top:1.19em}.hn{margin-bottom:32px}.ho{line-height:52px}.hp{letter-spacing:-0.011em}.hy{align-items:center}.jv{border-top:solid 1px #F2F2F2}.jw{border-bottom:solid 1px #F2F2F2}.jx{margin:32px 0 0}.jy{padding:3px 8px}.kj> *{margin-right:24px}.kk> :last-child{margin-right:0}.ma{margin:0}.nk{font-size:20px}.nl{margin-top:2.14em}.nm{line-height:32px}.nn{letter-spacing:-0.003em}.oa{margin-top:56px}.ox{font-size:24px}.oy{margin-top:1.95em}.oz{line-height:30px}.pa{letter-spacing:-0.016em}.pj{margin-top:0.94em}.pt{margin-top:1.72em}.pu{line-height:24px}.pv{letter-spacing:0}.qk{margin-top:1.14em}.rw{flex-direction:row}.sa{margin-bottom:0}.sb{margin-right:20px}.sp{max-width:500px}.to{margin-bottom:88px}.tz{margin:40px 0 16px}.ul{width:min-width}.uq{padding-top:72px}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (min-width: 728px) and (max-width: 903.98px)">.j{display:none}.w{display:flex}.x{justify-content:space-between}.bu{width:64px}.ce{margin:0 48px}.ct{height:48px}.da{margin-bottom:52px}.dm{margin-bottom:48px}.eb{font-size:13px}.ec{line-height:20px}.ej{padding:0px 8px 1px}.fw{margin-bottom:50px}.ga{max-width:680px}.hg{font-size:42px}.hh{margin-top:1.19em}.hi{margin-bottom:32px}.hj{line-height:52px}.hk{letter-spacing:-0.011em}.hx{align-items:center}.jr{border-top:solid 1px #F2F2F2}.js{border-bottom:solid 1px #F2F2F2}.jt{margin:32px 0 0}.ju{padding:3px 8px}.kh> *{margin-right:24px}.ki> :last-child{margin-right:0}.lz{margin:0}.ng{font-size:20px}.nh{margin-top:2.14em}.ni{line-height:32px}.nj{letter-spacing:-0.003em}.nz{margin-top:56px}.ot{font-size:24px}.ou{margin-top:1.95em}.ov{line-height:30px}.ow{letter-spacing:-0.016em}.pi{margin-top:0.94em}.pq{margin-top:1.72em}.pr{line-height:24px}.ps{letter-spacing:0}.qj{margin-top:1.14em}.rx{flex-direction:row}.sc{margin-bottom:0}.sd{margin-right:20px}.sq{max-width:500px}.tn{margin-bottom:88px}.ty{margin:40px 0 16px}.uk{width:min-width}.up{padding-top:72px}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="all and (min-width: 552px) and (max-width: 727.98px)">.k{display:none}.u{display:flex}.v{justify-content:space-between}.bt{width:24px}.cd{margin:0 24px}.cs{height:40px}.cz{margin-bottom:44px}.dl{margin-bottom:32px}.dz{font-size:13px}.ea{line-height:20px}.ei{padding:0px 8px 1px}.fv{margin-bottom:2px}.hb{font-size:32px}.hc{margin-top:1.01em}.hd{margin-bottom:24px}.he{line-height:38px}.hf{letter-spacing:-0.014em}.hw{align-items:flex-start}.iz{flex-direction:column}.jp{margin:24px 0 0}.jq{padding:0}.kf> *{margin-right:8px}.kg> :last-child{margin-right:8px}.kw{margin-left:0px}.ly{margin:0}.mo{border:1px solid #F2F2F2}.mp{border-radius:99em}.mq{padding:0px 16px 0px 12px}.mr{height:38px}.ms{align-items:center}.mu svg{margin-right:8px}.nc{font-size:18px}.nd{margin-top:1.56em}.ne{line-height:28px}.nf{letter-spacing:-0.003em}.ny{margin-top:40px}.op{font-size:20px}.oq{margin-top:1.2em}.or{line-height:24px}.os{letter-spacing:0}.ph{margin-top:0.67em}.po{font-size:16px}.pp{margin-top:1.23em}.qi{margin-top:1.34em}.se{margin-bottom:20px}.sf{margin-right:0}.sr{max-width:100%}.sy{font-size:24px}.sz{line-height:30px}.ta{letter-spacing:-0.016em}.tm{margin-bottom:64px}.tx{margin:32px 0 16px}.uj{width:100%}.uo{padding-top:48px}.mt:hover{border-color:#E5E5E5}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="print">.rl{display:none}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="(orientation: landscape) and (max-width: 903.98px)">.jk{max-height:none}</style><style type="text/css" data-fela-rehydration="568" data-fela-type="RULE" media="(prefers-reduced-motion: no-preference)">.od{transition:transform 300ms cubic-bezier(0.2, 0, 0.2, 1)}</style></head><body><div id="root"><div class="a b c"><div class="d e f g h i j k"></div><script>document.domain = document.domain;</script><div class="l c"><div class="l m n o c"><div class="p q r s t u v w x i d y z"><a class="du ag dv bf ak b am an ao ap aq ar as at s u w i d q dw z" href="https://rsci.app.link/?%24canonical_url=https%3A%2F%2Fmedium.com%2Fp%2F777ffea6fabf&%7Efeature=LoOpenInAppButton&%7Echannel=ShowPostUnderCollection&source=---top_nav_layout_nav-----------------------------------------" rel="noopener follow">Open in app<svg xmlns="http://www.w3.org/2000/svg" width="10" height="10" fill="none" viewBox="0 0 10 10" class="dt"><path fill="currentColor" d="M.985 8.485a.375.375 0 1 0 .53.53zM8.75 1.25h.375A.375.375 0 0 0 8.75.875zM8.375 6.5a.375.375 0 1 0 .75 0zM3.5.875a.375.375 0 1 0 0 .75zm-1.985 8.14 7.5-7.5-.53-.53-7.5 7.5zm6.86-7.765V6.5h.75V1.25zM3.5 1.625h5.25v-.75H3.5z"></path></svg></a><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="p q r ab ac"><div class="ab q ae"><a class="af ag ah ai aj ak al am an ao ap aq ar as at ab" aria-label="Homepage" data-testid="headerMediumLogo" rel="noopener follow" href="/?source=---top_nav_layout_nav-----------------------------------------"><svg xmlns="http://www.w3.org/2000/svg" width="719" height="160" fill="none" viewBox="0 0 719 160" class="au av aw"><path fill="#242424" d="m174.104 9.734.215-.047V8.02H130.39L89.6 103.89 48.81 8.021H1.472v1.666l.212.047c8.018 1.81 12.09 4.509 12.09 14.242V137.93c0 9.734-4.087 12.433-12.106 14.243l-.212.047v1.671h32.118v-1.665l-.213-.048c-8.018-1.809-12.089-4.509-12.089-14.242V30.586l52.399 123.305h2.972l53.925-126.743V140.75c-.687 7.688-4.721 10.062-11.982 11.701l-.215.05v1.652h55.948v-1.652l-.215-.05c-7.269-1.639-11.4-4.013-12.087-11.701l-.037-116.774h.037c0-9.733 4.071-12.432 12.087-14.242m25.555 75.488c.915-20.474 8.268-35.252 20.606-35.507 3.806.063 6.998 1.312 9.479 3.714 5.272 5.118 7.751 15.812 7.368 31.793zm-.553 5.77h65.573v-.275c-.186-15.656-4.721-27.834-13.466-36.196-7.559-7.227-18.751-11.203-30.507-11.203h-.263c-6.101 0-13.584 1.48-18.909 4.16-6.061 2.807-11.407 7.003-15.855 12.511-7.161 8.874-11.499 20.866-12.554 34.343q-.05.606-.092 1.212a50 50 0 0 0-.065 1.151 85.807 85.807 0 0 0-.094 5.689c.71 30.524 17.198 54.917 46.483 54.917 25.705 0 40.675-18.791 44.407-44.013l-1.886-.664c-6.557 13.556-18.334 21.771-31.738 20.769-18.297-1.369-32.314-19.922-31.042-42.395m139.722 41.359c-2.151 5.101-6.639 7.908-12.653 7.908s-11.513-4.129-15.418-11.63c-4.197-8.053-6.405-19.436-6.405-32.92 0-28.067 8.729-46.22 22.24-46.22 5.657 0 10.111 2.807 12.236 7.704zm43.499 20.008c-8.019-1.897-12.089-4.722-12.089-14.951V1.309l-48.716 14.353v1.757l.299-.024c6.72-.543 11.278.386 13.925 2.83 2.072 1.915 3.082 4.853 3.082 8.987v18.66c-4.803-3.067-10.516-4.56-17.448-4.56-14.059 0-26.909 5.92-36.176 16.672-9.66 11.205-14.767 26.518-14.767 44.278-.003 31.72 15.612 53.039 38.851 53.039 13.595 0 24.533-7.449 29.54-20.013v16.865h43.711v-1.746zM424.1 19.819c0-9.904-7.468-17.374-17.375-17.374-9.859 0-17.573 7.632-17.573 17.374s7.721 17.374 17.573 17.374c9.907 0 17.375-7.47 17.375-17.374m11.499 132.546c-8.019-1.897-12.089-4.722-12.089-14.951h-.035V43.635l-43.714 12.551v1.705l.263.024c9.458.842 12.047 4.1 12.047 15.152v81.086h43.751v-1.746zm112.013 0c-8.018-1.897-12.089-4.722-12.089-14.951V43.635l-41.621 12.137v1.71l.246.026c7.733.813 9.967 4.257 9.967 15.36v59.279c-2.578 5.102-7.415 8.131-13.274 8.336-9.503 0-14.736-6.419-14.736-18.073V43.638l-43.714 12.55v1.703l.262.024c9.459.84 12.05 4.097 12.05 15.152v50.17a56.3 56.3 0 0 0 .91 10.444l.787 3.423c3.701 13.262 13.398 20.197 28.59 20.197 12.868 0 24.147-7.966 29.115-20.43v17.311h43.714v-1.747zm169.818 1.788v-1.749l-.213-.05c-8.7-2.006-12.089-5.789-12.089-13.49v-63.79c0-19.89-11.171-31.761-29.883-31.761-13.64 0-25.141 7.882-29.569 20.16-3.517-13.01-13.639-20.16-28.606-20.16-13.146 0-23.449 6.938-27.869 18.657V43.643L545.487 55.68v1.715l.263.024c9.345.829 12.047 4.181 12.047 14.95v81.784h40.787v-1.746l-.215-.053c-6.941-1.631-9.181-4.606-9.181-12.239V66.998c1.836-4.289 5.537-9.37 12.853-9.37 9.086 0 13.692 6.296 13.692 18.697v77.828h40.797v-1.746l-.215-.053c-6.94-1.631-9.18-4.606-9.18-12.239V75.066a42 42 0 0 0-.578-7.26c1.947-4.661 5.86-10.177 13.475-10.177 9.214 0 13.691 6.114 13.691 18.696v77.828z"></path></svg></a><div class="ax h"><div class="ab ay az ba bb q bc bd"><div class="bm" aria-hidden="false" aria-describedby="searchResults" aria-labelledby="searchResults"></div><div class="bn bo ab"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div><input role="combobox" aria-controls="searchResults" aria-expanded="false" aria-label="search" data-testid="headerSearchInput" tabindex="0" class="ay be bf bg z bh bi bj bk bl" placeholder="Search" value=""/></div></div></div><div class="h k w fg fh"><div class="fi ab"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerWriteButton" rel="noopener follow" href="/m/signin?operation=register&redirect=https%3A%2F%2Fmedium.com%2Fnew-story&source=---top_nav_layout_nav-----------------------new_post_topnav------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Write"><path fill="currentColor" d="M14 4a.5.5 0 0 0 0-1zm7 6a.5.5 0 0 0-1 0zm-7-7H4v1h10zM3 4v16h1V4zm1 17h16v-1H4zm17-1V10h-1v10zm-1 1a1 1 0 0 0 1-1h-1zM3 20a1 1 0 0 0 1 1v-1zM4 3a1 1 0 0 0-1 1h1z"></path><path stroke="currentColor" d="m17.5 4.5-8.458 8.458a.25.25 0 0 0-.06.098l-.824 2.47a.25.25 0 0 0 .316.316l2.47-.823a.25.25 0 0 0 .098-.06L19.5 6.5m-2-2 2.323-2.323a.25.25 0 0 1 .354 0l1.646 1.646a.25.25 0 0 1 0 .354L19.5 6.5m-2-2 2 2"></path></svg><div class="dt l">Write</div></div></a></span></div></div><div class="k j i d"><div class="fi ab"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSearchButton" rel="noopener follow" href="/search?source=---top_nav_layout_nav-----------------------------------------"><div class="bf b bg z du fj fk ab q fl fm"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24" aria-label="Search"><path fill="currentColor" fill-rule="evenodd" d="M4.092 11.06a6.95 6.95 0 1 1 13.9 0 6.95 6.95 0 0 1-13.9 0m6.95-8.05a8.05 8.05 0 1 0 5.13 14.26l3.75 3.75a.56.56 0 1 0 .79-.79l-3.73-3.73A8.05 8.05 0 0 0 11.042 3z" clip-rule="evenodd"></path></svg></div></a></div></div><div class="fi h k j"><div class="ab q"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><button class="bf b dx dy eh dz ea ei eb ec ej ek ee el em eg eo ep eq er es et eu ev ew ex ey ez fa fb fc fd bm fe ff" data-testid="headerSignUpButton">Sign up</button></span></p><div class="ax l"><p class="bf b dx dy dz ea eb ec ed ee ef eg du"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerSignInButton" rel="noopener follow" href="/m/signin?operation=login&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&source=post_page---top_nav_layout_nav-----------------------global_nav------------------">Sign in</a></span></p></div></div></div><div class="l" aria-hidden="false"><button class="ay fn am ab q ao fo fp fq" aria-label="user options menu" data-testid="headerUserIcon"><div class="l fj"><img alt="" class="l fd by bz ca cx" src="https://miro.medium.com/v2/resize:fill:64:64/1*dmbNkD5D-u45r44go_cf0g.png" width="32" height="32" loading="lazy" role="presentation"/><div class="fr by l bz ca fs n ay ft"></div></div></button></div></div></div><div class="l"><div class="fu fv fw fx fy l"><div class="ab cb"><div class="ci bh fz ga gb gc"></div></div><article><div class="l"><div class="l"><span class="l"></span><section><div><div class="fs gi gj gk gl gm"></div><div class="gn go gp gq gr"><div class="ab cb"><div class="ci bh fz ga gb gc"><div><h1 id="3c09" class="pw-post-title gs gt gu bf gv gw gx gy gz ha hb hc hd he hf hg hh hi hj hk hl hm hn ho hp hq hr hs ht hu bk" data-testid="storyTitle">Plans for the Next Iteration of Vue.js</h1><div><div class="speechify-ignore ab cp"><div class="speechify-ignore bh l"><div class="hv hw hx hy hz ab"><div><div class="ab ia"><div><div class="bm" aria-hidden="false"><a rel="noopener follow" href="/@youyuxi?source=post_page---byline--777ffea6fabf---------------------------------------"><div class="l ib ic by id ie"><div class="l fj"><img alt="Evan You" class="l fd by dd de cx" src="https://miro.medium.com/v2/resize:fill:88:88/0*k6Vzz_7jU2jXNEXT.jpeg" width="44" height="44" loading="lazy" data-testid="authorPhoto"/><div class="if by l dd de fs n ig ft"></div></div></div></a></div></div><div class="ih ab fj"><div><div class="bm" aria-hidden="false"><a href="https://medium.com/the-vue-point?source=post_page---byline--777ffea6fabf---------------------------------------" rel="noopener follow"><div class="l ii ij by id ik"><div class="l fj"><img alt="The Vue Point" class="l fd by br il cx" src="https://miro.medium.com/v2/resize:fill:48:48/1*yeAO-nwsAqnzr7k-zoDkoQ.png" width="24" height="24" loading="lazy" data-testid="publicationPhoto"/><div class="if by l br il fs n ig ft"></div></div></div></a></div></div></div></div></div><div class="bn bh l"><div class="ab"><div style="flex:1"><span class="bf b bg z bk"><div class="im ab q"><div class="ab q in"><div class="ab q"><div><div class="bm" aria-hidden="false"><p class="bf b io ip bk"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" data-testid="authorName" rel="noopener follow" href="/@youyuxi?source=post_page---byline--777ffea6fabf---------------------------------------">Evan You</a></p></div></div></div><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span><p class="bf b io ip du"><span><a class="it iu ah ai aj ak al am an ao ap aq ar ex iv iw" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fsubscribe%2Fuser%2F4f198f5f1f12&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&user=Evan+You&userId=4f198f5f1f12&source=post_page-4f198f5f1f12--byline--777ffea6fabf---------------------post_header------------------">Follow</a></span></p></div></div></span></div></div><div class="l ix"><span class="bf b bg z du"><div class="ab cn iy iz ja"><div class="fu fv ab"><div class="bf b bg z du ab jb"><span class="jc l ix">Published in</span><div><div class="l" aria-hidden="false"><a class="af ag ah ai aj ak al am an ao ap aq ar iq ab q" data-testid="publicationName" href="https://medium.com/the-vue-point?source=post_page---byline--777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b bg z jd je jf jg jh ji jj jk bk">The Vue Point</p></a></div></div></div><div class="h k"><span class="ir is" aria-hidden="true"><span class="bf b bg z du">·</span></span></div></div><span class="bf b bg z du"><div class="ab ae"><span data-testid="storyReadTime">9 min read</span><div class="jl jm l" aria-hidden="true"><span class="l" aria-hidden="true"><span class="bf b bg z du">·</span></span></div><span data-testid="storyPublishDate">Sep 30, 2018</span></div></span></div></span></div></div></div><div class="ab cp jn jo jp jq jr js jt ju jv jw jx jy jz ka kb kc"><div class="h k w fg fh q"><div class="ks l"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fthe-vue-point%2F777ffea6fabf&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&user=Evan+You&userId=4f198f5f1f12&source=---header_actions--777ffea6fabf---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></div><div><div class="bm" aria-hidden="false"><button class="ao ky lq lr ab q fk ls lt" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lp"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b dv z du"><span class="pw-responses-count lo lp">72</span></p></button></div></div></div><div class="ab q kd ke kf kg kh ki kj kk kl km kn ko kp kq kr"><div class="lu k j i d"></div><div class="h k"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="headerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F777ffea6fabf&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&source=---header_actions--777ffea6fabf---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lv" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="fd lw cn"><div class="l ae"><div class="ab cb"><div class="lx ly lz ma mb mc ci bh"><div class="ab"><div class="bm" aria-hidden="false"><div><div class="bm" aria-hidden="false"><button aria-label="Listen" data-testid="audioPlayButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg mh mi mj mk s ml mm mn mo mp mq mr u ms mt mu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M3 12a9 9 0 1 1 18 0 9 9 0 0 1-18 0m9-10C6.477 2 2 6.477 2 12s4.477 10 10 10 10-4.477 10-10S17.523 2 12 2m3.376 10.416-4.599 3.066a.5.5 0 0 1-.777-.416V8.934a.5.5 0 0 1 .777-.416l4.599 3.066a.5.5 0 0 1 0 .832" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Listen</p></div></button></div></div></div></div></div></div></div></div><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="headerSocialShareButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg mh mi mj mk s ml mm mn mo mp mq mr u ms mt mu"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg><div class="j i d"><p class="bf b bg z du">Share</p></div></button></div></div></div></div></div></div></div></div></div><p id="c723" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">Last week at <a class="af nt" href="https://vuejs.london/summary" rel="noopener ugc nofollow" target="_blank">Vue.js London</a> I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan.</p><figure class="nx ny nz oa ob oc nu nv paragraph-image"><div role="button" tabindex="0" class="od oe fj of bh og"><div class="nu nv nw"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*vFC8tDUGLlXIiqT7ymf3xg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*vFC8tDUGLlXIiqT7ymf3xg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*vFC8tDUGLlXIiqT7ymf3xg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*vFC8tDUGLlXIiqT7ymf3xg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*vFC8tDUGLlXIiqT7ymf3xg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*vFC8tDUGLlXIiqT7ymf3xg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*vFC8tDUGLlXIiqT7ymf3xg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*vFC8tDUGLlXIiqT7ymf3xg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mc oh c" width="700" height="990" loading="eager" role="presentation"/></picture></div></div></figure><h1 id="3faf" class="oi oj gu bf ok ol om on oo op oq or os ot ou ov ow ox oy oz pa pb pc pd pe pf bk">Why a new major version?</h1><p id="830d" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">Vue 2.0 was released <a class="af nt" rel="noopener" href="/the-vue-point/vue-2-0-is-here-ef1f26acf4b8">exactly two years ago</a> (how time flies!). During this period, the core has remained backwards compatible with five minor releases. We’ve accumulated a number of ideas that would bring improvements, but they were held off because they would result in breaking changes. At the same time, the JavaScript ecosystem and the language itself has been evolving rapidly. There are greatly improved tools that could enhance our workflow, and many new language features that could unlock simpler, more complete, and more efficient solutions to the problems Vue is trying to solve. What’s more exciting is that we are seeing ES2015 support becoming a baseline for all major evergreen browsers. Vue 3.0 aims to leverage these new language features to make Vue core smaller, faster, and more powerful.</p><p id="506c" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">Vue 3.0 is currently in prototyping phase, and we have already implemented a runtime close to feature-parity with 2.x. <strong class="mx gv">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 *.</strong></p><h1 id="1842" class="oi oj gu bf ok ol om on oo op oq or os ot ou ov ow ox oy oz pa pb pc pd pe pf bk">The Details</h1><h2 id="f25a" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">High-Level API Changes</h2><blockquote class="qa qb qc"><p id="873d" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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.</p></blockquote><p id="e6bc" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 class=""><li id="60e3" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">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.</li><li id="087d" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">̶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̶ . <em class="qd">Update: the Class API draft has been dropped. We have published a new </em><a class="af nt" href="https://github.com/vuejs/rfcs/pull/42" rel="noopener ugc nofollow" target="_blank"><em class="qd">function-based API proposal</em></a><em class="qd"> that provides better logic composition, better TypeScript support, and compatible with 2.x API.</em></li><li id="f646" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Mixins will still be supported.*</li><li id="ddf4" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.* <em class="qd">(Update: </em><a class="af nt" href="https://github.com/vuejs/rfcs/pull/29" rel="noopener ugc nofollow" target="_blank"><em class="qd">related RFC</em></a><em class="qd">)</em></li><li id="024d" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function. <em class="qd">(Update: </em><a class="af nt" href="https://github.com/vuejs/rfcs/pull/27" rel="noopener ugc nofollow" target="_blank"><em class="qd">related RFC</em></a><em class="qd">)</em></li><li id="d6b3" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.</li></ul><h2 id="1855" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">Source Code Architecture</h2><blockquote class="qa qb qc"><p id="eca2" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">TL;DR: better decoupled internal modules, TypeScript, and a codebase that is easier to contribute to.</p></blockquote><p id="15e9" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 id="9879" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 id="6a59" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 class="cx qm qn qo qp b">requestIdleCallback</code> to yield to the browser during long updates.*</p><figure class="nx ny nz oa ob oc nu nv paragraph-image"><div class="nu nv qq"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 1100w, https://miro.medium.com/v2/resize:fit:920/format:webp/1*H8yM0usFhWYlY6GV2wcrEw.png 920w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 460px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*H8yM0usFhWYlY6GV2wcrEw.png 640w, https://miro.medium.com/v2/resize:fit:720/1*H8yM0usFhWYlY6GV2wcrEw.png 720w, https://miro.medium.com/v2/resize:fit:750/1*H8yM0usFhWYlY6GV2wcrEw.png 750w, https://miro.medium.com/v2/resize:fit:786/1*H8yM0usFhWYlY6GV2wcrEw.png 786w, https://miro.medium.com/v2/resize:fit:828/1*H8yM0usFhWYlY6GV2wcrEw.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*H8yM0usFhWYlY6GV2wcrEw.png 1100w, https://miro.medium.com/v2/resize:fit:920/1*H8yM0usFhWYlY6GV2wcrEw.png 920w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 460px"/><img alt="" class="bh mc oh c" width="460" height="716" loading="lazy" role="presentation"/></picture></div><figcaption class="qr ff qs nu nv qt qu bf b bg z du">Sneak peek of the new source code structure (subject to change)</figcaption></figure><h2 id="ba44" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">Observation Mechanism</h2><blockquote class="qa qb qc"><p id="1d8c" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">TL;DR: more complete, precise, efficient and debuggable reactivity tracking & API for creating observables.</p></blockquote><p id="7a7b" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 class="cx qm qn qo qp b">Object.defineProperty</code> :</p><ul class=""><li id="e40a" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">Detection of property addition / deletion</li><li id="8ed1" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Detection of Array index mutation / .length mutation</li><li id="2ae7" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Support for Map, Set, WeakMap and WeakSet</li></ul><p id="c8ce" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">The new observer also features the following:</p><ul class=""><li id="67fc" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">Exposed API for creating observables. This offers a light-weight, dead simple cross-component state management solution for small to medium scale scenarios.</li><li id="4d42" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Lazy observation by default. In 2.x, any reactive data, regardless of how big it is, will be observed on startup. This can cause a noticeable overhead on app startup if your dataset is huge. In 3.x, only data used to render the initially visible part of your app will need to be observed, not to mention the observation itself is also much faster.</li><li id="b80c" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">More precise change notification. An example: in 2.x, force adding a new property using <code class="cx qm qn qo qp b">Vue.set</code> will cause any watcher that depends on the object to re-evaluate. In 3.x, only watchers that relies on that specific property will be notified.</li><li id="3a16" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Immutable observables: we can create “immutable” versions of a value that prevents mutations even on nested properties, except when the system temporarily unlocks it internally. This mechanism can be used to freeze passed-down props or Vuex state trees outside mutations.</li><li id="3080" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Better debugging capabilities: we can precisely trace when and why a component re-render is tracked or triggered using the new <code class="cx qm qn qo qp b">renderTracked</code> and <code class="cx qm qn qo qp b">renderTriggered</code> hooks:</li></ul><figure class="nx ny nz oa ob oc nu nv paragraph-image"><div role="button" tabindex="0" class="od oe fj of bh og"><div class="nu nv qv"><picture><source srcSet="https://miro.medium.com/v2/resize:fit:640/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 640w, https://miro.medium.com/v2/resize:fit:720/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 720w, https://miro.medium.com/v2/resize:fit:750/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 750w, https://miro.medium.com/v2/resize:fit:786/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 786w, https://miro.medium.com/v2/resize:fit:828/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 828w, https://miro.medium.com/v2/resize:fit:1100/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/format:webp/1*waSYB1v2aRgUFx21-JSwRg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px" type="image/webp"/><source data-testid="og" srcSet="https://miro.medium.com/v2/resize:fit:640/1*waSYB1v2aRgUFx21-JSwRg.png 640w, https://miro.medium.com/v2/resize:fit:720/1*waSYB1v2aRgUFx21-JSwRg.png 720w, https://miro.medium.com/v2/resize:fit:750/1*waSYB1v2aRgUFx21-JSwRg.png 750w, https://miro.medium.com/v2/resize:fit:786/1*waSYB1v2aRgUFx21-JSwRg.png 786w, https://miro.medium.com/v2/resize:fit:828/1*waSYB1v2aRgUFx21-JSwRg.png 828w, https://miro.medium.com/v2/resize:fit:1100/1*waSYB1v2aRgUFx21-JSwRg.png 1100w, https://miro.medium.com/v2/resize:fit:1400/1*waSYB1v2aRgUFx21-JSwRg.png 1400w" sizes="(min-resolution: 4dppx) and (max-width: 700px) 50vw, (-webkit-min-device-pixel-ratio: 4) and (max-width: 700px) 50vw, (min-resolution: 3dppx) and (max-width: 700px) 67vw, (-webkit-min-device-pixel-ratio: 3) and (max-width: 700px) 65vw, (min-resolution: 2.5dppx) and (max-width: 700px) 80vw, (-webkit-min-device-pixel-ratio: 2.5) and (max-width: 700px) 80vw, (min-resolution: 2dppx) and (max-width: 700px) 100vw, (-webkit-min-device-pixel-ratio: 2) and (max-width: 700px) 100vw, 700px"/><img alt="" class="bh mc oh c" width="700" height="480" loading="lazy" role="presentation"/></picture></div></div><figcaption class="qr ff qs nu nv qt qu bf b bg z du">Easily understand why a component is re-rendering</figcaption></figure><h2 id="d734" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">Other Runtime Improvements</h2><blockquote class="qa qb qc"><p id="fb06" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">TL;DR: smaller, faster, tree-shakable features, fragments & portals, custom renderer API.</p></blockquote><ul class=""><li id="9886" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">Smaller: the new codebase is designed from the ground up to be tree-shaking friendly. Features such as built-in components (<code class="cx qm qn qo qp b"><transition></code>, <code class="cx qm qn qo qp b"><keep-alive></code>) and directive runtime helpers (<code class="cx qm qn qo qp b">v-model</code>) are now imported on-demand and tree-shakable. <strong class="mx gv">The constant baseline size for the new runtime is <10kb gzipped.</strong> In addition, features being tree-shakable also allows us to offer more built-in features down the road without incurring payload penalties for users that don’t use them.</li><li id="206a" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Faster: on preliminary benchmarks, we are seeing up to 100% performance improvement across the board, including raw Virtual DOM mounting & patching (we learned quite a few tricks from <a class="af nt" href="https://infernojs.org/" rel="noopener ugc nofollow" target="_blank">Inferno</a>, the fastest Virtual DOM implementation out there), component instance initialization and data observation. 3.0 will shave off half the time spent in JavaScript when your app boots up.</li><li id="dd42" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Fragments & Portals: despite the size reduction, 3.0 comes with built-in support for Fragments (component returning multiple root nodes) and Portals (rendering a sub-tree in another part of the DOM, instead of inside the component).</li><li id="5b54" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Improved slots mechanism: All compiler-generated slots are now functions and invoked during the child component’s render call. This ensures dependencies in slots are collected as dependencies for the child instead of the parent. This means that: 1. when slot content changes, only the child re-renders; 2. when the parent re-renders, the child does not have to if its slot content did not change. This change offers even more precise change detection at the component tree level, so even fewer useless re-renders!</li><li id="c0e2" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Custom Renderer API: a first-class API for creating custom renderers will be available, and no longer requires forking the Vue codebase with custom modifications. This will make it much easier for render-to-native projects like <a class="af nt" href="https://weex-project.io/" rel="noopener ugc nofollow" target="_blank">Weex</a> and <a class="af nt" href="https://nativescript-vue.org/" rel="noopener ugc nofollow" target="_blank">NativeScript Vue</a> to stay up-to-date with upstream changes. It would also make it trivially easy to create custom renderers for various other purposes.</li></ul><h2 id="4515" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">Compiler Improvements*</h2><blockquote class="qa qb qc"><p id="92d4" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">TL;DR: tree-shaking friendly output, more AOT optimizations, parser with better error info and source map support.</p></blockquote><ul class=""><li id="e1ba" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">When targeting tree-shaking-capable bundlers, templates that make use of optional features will generate code that imports those features using ES modules syntax. Unused optional features are thus dropped from the final bundle.</li><li id="6a24" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Due to improvements in the new Virtual DOM implementation, we are also able to perform more effective compile-time optimizations such as static tree hoisting, static props hoisting, compiler-hints for runtime to skip children normalization, VNode creation fast paths, etc…</li><li id="f578" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">We plan to rewrite the parser to provide location information in template compilation errors. This should also lead to template source map support, and the new parser can serve as the foundation for 3rd party tooling integration, such as <code class="cx qm qn qo qp b">eslint-plugin-vue</code> and IDE language services.</li></ul><h2 id="df62" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">IE11 Support*</h2><blockquote class="qa qb qc"><p id="e716" class="mv mw qd mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">TL;DR: it will be supported, but in a separate build with the same reactivity limitations of Vue 2.x.</p></blockquote><p id="fbd8" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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 class="cx qm qn qo qp b">Object.defineProperty</code> API. A separate build of Vue 3.x will be distributed using this observer implementation. However, this build will be subject to the same change detection caveats of Vue 2.x and thus not fully compatible with the “modern” build of 3.x. We are aware that this imposes some inconvenience for library authors as they will need to be aware of compatibility for two different builds, but we will make sure to provide clear guidelines on this when we reach that stage.</p><h1 id="4cbf" class="oi oj gu bf ok ol om on oo op oq or os ot ou ov ow ox oy oz pa pb pc pd pe pf bk">How Do We Get There</h1><p id="dfb9" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><h2 id="caef" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">1. Internal Feedback for the Runtime Prototype</h2><p id="fe69" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><h2 id="c096" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">2. Public Feedback via RFCs</h2><p id="578e" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><ul class=""><li id="758c" class="mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns qe qf qg bk">Scope of the change;</li><li id="b996" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Reasoning behind the change: what do we gain, and what tradeoffs are being made;</li><li id="16ec" class="mv mw gu mx b my qh na nb nc qi ne nf ng qj ni nj nk qk nm nn no ql nq nr ns qe qf qg bk">Upgrade path: can it be introduced in a completely backwards-compatible fashion, via a removable compatibility layer, or via codemods?</li></ul><p id="3efa" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">We will anticipate public feedback from the wider community to help us consolidate these ideas.</p><h2 id="fd3e" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">3. Introduce Compatible Features in 2.x & 2.x-next</h2><p id="ca25" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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 id="4cab" class="pw-post-body-paragraph mv mw gu mx b my mz na nb nc nd ne nf ng nh ni nj nk nl nm nn no np nq nr ns gn bk">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><h2 id="7b5c" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">4. Alpha Phase</h2><p id="2c1b" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><h2 id="744e" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">5. Beta Phase</h2><p id="07e8" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><h2 id="086b" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">6. RC Phase</h2><p id="fe82" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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><h2 id="1e76" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">7. IE11 build</h2><p id="0df2" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">The last task before the final release will be the IE11 compatibility build as mentioned above.</p><h2 id="1601" class="pl oj gu bf ok pm pn dy oo po pp ea os ng pq pr ps nk pt pu pv no pw px py pz bk">8. Final Release</h2><p id="90e3" class="pw-post-body-paragraph mv mw gu mx b my pg na nb nc ph ne nf ng pi ni nj nk pj nm nn no pk nq nr ns gn bk">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></div></div></div></div></section></div></div></article></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="qw qx ab ja"><div class="qy ab"><a class="qz ay am ao" rel="noopener follow" href="/tag/javascript?source=post_page-----777ffea6fabf---------------------------------------"><div class="ra fj cx rb ge rc rd bf b bg z bk re">JavaScript</div></a></div><div class="qy ab"><a class="qz ay am ao" rel="noopener follow" href="/tag/front-end-development?source=post_page-----777ffea6fabf---------------------------------------"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Front End Development</div></a></div><div class="qy ab"><a class="qz ay am ao" rel="noopener follow" href="/tag/vuejs?source=post_page-----777ffea6fabf---------------------------------------"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Vuejs</div></a></div><div class="qy ab"><a class="qz ay am ao" rel="noopener follow" href="/tag/vue?source=post_page-----777ffea6fabf---------------------------------------"><div class="ra fj cx rb ge rc rd bf b bg z bk re">Vue</div></a></div></div></div></div><div class="l"></div><footer class="rf rg rh ri rj ab q rk ik c"><div class="l ae"><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab cp rl"><div class="ab q kt"><div class="rm l"><span class="l rn ro rp e d"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fthe-vue-point%2F777ffea6fabf&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&user=Evan+You&userId=4f198f5f1f12&source=---footer_actions--777ffea6fabf---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></span><span class="l h g f rq rr"><div class="ab q kt ku"><div class="pw-multi-vote-icon fj jc kv kw kx"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerClapButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fvote%2Fthe-vue-point%2F777ffea6fabf&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&user=Evan+You&userId=4f198f5f1f12&source=---footer_actions--777ffea6fabf---------------------clap_footer------------------"><div><div class="bm" aria-hidden="false"><div class="ky ao kz la lb lc am ld le lf kx"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" aria-label="clap"><path fill-rule="evenodd" d="M11.37.828 12 3.282l.63-2.454zM13.916 3.953l1.523-2.112-1.184-.39zM8.589 1.84l1.522 2.112-.337-2.501zM18.523 18.92c-.86.86-1.75 1.246-2.62 1.33a6 6 0 0 0 .407-.372c2.388-2.389 2.86-4.951 1.399-7.623l-.912-1.603-.79-1.672c-.26-.56-.194-.98.203-1.288a.7.7 0 0 1 .546-.132c.283.046.546.231.728.5l2.363 4.157c.976 1.624 1.141 4.237-1.324 6.702m-10.999-.438L3.37 14.328a.828.828 0 0 1 .585-1.408.83.83 0 0 1 .585.242l2.158 2.157a.365.365 0 0 0 .516-.516l-2.157-2.158-1.449-1.449a.826.826 0 0 1 1.167-1.17l3.438 3.44a.363.363 0 0 0 .516 0 .364.364 0 0 0 0-.516L5.293 9.513l-.97-.97a.826.826 0 0 1 0-1.166.84.84 0 0 1 1.167 0l.97.968 3.437 3.436a.36.36 0 0 0 .517 0 .366.366 0 0 0 0-.516L6.977 7.83a.82.82 0 0 1-.241-.584.82.82 0 0 1 .824-.826c.219 0 .43.087.584.242l5.787 5.787a.366.366 0 0 0 .587-.415l-1.117-2.363c-.26-.56-.194-.98.204-1.289a.7.7 0 0 1 .546-.132c.283.046.545.232.727.501l2.193 3.86c1.302 2.38.883 4.59-1.277 6.75-1.156 1.156-2.602 1.627-4.19 1.367-1.418-.236-2.866-1.033-4.079-2.246M10.75 5.971l2.12 2.12c-.41.502-.465 1.17-.128 1.89l.22.465-3.523-3.523a.8.8 0 0 1-.097-.368c0-.22.086-.428.241-.584a.847.847 0 0 1 1.167 0m7.355 1.705c-.31-.461-.746-.758-1.23-.837a1.44 1.44 0 0 0-1.11.275c-.312.24-.505.543-.59.881a1.74 1.74 0 0 0-.906-.465 1.47 1.47 0 0 0-.82.106l-2.182-2.182a1.56 1.56 0 0 0-2.2 0 1.54 1.54 0 0 0-.396.701 1.56 1.56 0 0 0-2.21-.01 1.55 1.55 0 0 0-.416.753c-.624-.624-1.649-.624-2.237-.037a1.557 1.557 0 0 0 0 2.2c-.239.1-.501.238-.715.453a1.56 1.56 0 0 0 0 2.2l.516.515a1.556 1.556 0 0 0-.753 2.615L7.01 19c1.32 1.319 2.909 2.189 4.475 2.449q.482.08.971.08c.85 0 1.653-.198 2.393-.579.231.033.46.054.686.054 1.266 0 2.457-.52 3.505-1.567 2.763-2.763 2.552-5.734 1.439-7.586z" clip-rule="evenodd"></path></svg></div></div></div></a></span></div><div class="pw-multi-vote-count l lg lh li lj lk ll lm"><p class="bf b dv z du"><span class="ln">--</span></p></div></div></span></div><div class="bq ab"><div><div class="bm" aria-hidden="false"><button class="ao ky lq lr ab q fk ls lt" aria-label="responses"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" class="lp"><path d="M18.006 16.803c1.533-1.456 2.234-3.325 2.234-5.321C20.24 7.357 16.709 4 12.191 4S4 7.357 4 11.482c0 4.126 3.674 7.482 8.191 7.482.817 0 1.622-.111 2.393-.327.231.2.48.391.744.559 1.06.693 2.203 1.044 3.399 1.044.224-.008.4-.112.486-.287a.49.49 0 0 0-.042-.518c-.495-.67-.845-1.364-1.04-2.057a4 4 0 0 1-.125-.598zm-3.122 1.055-.067-.223-.315.096a8 8 0 0 1-2.311.338c-4.023 0-7.292-2.955-7.292-6.587 0-3.633 3.269-6.588 7.292-6.588 4.014 0 7.112 2.958 7.112 6.593 0 1.794-.608 3.469-2.027 4.72l-.195.168v.255c0 .056 0 .151.016.295.025.231.081.478.154.733.154.558.398 1.117.722 1.659a5.3 5.3 0 0 1-2.165-.845c-.276-.176-.714-.383-.941-.59z"></path></svg><p class="bf b bg z du"><span class="pw-responses-count lo lp">72</span></p></button></div></div></div></div><div class="ab q"><div class="rs l ix"><div><div class="bm" aria-hidden="false"><span><a class="af ag ah ai aj ak al am an ao ap aq ar as at" data-testid="footerBookmarkButton" rel="noopener follow" href="/m/signin?actionUrl=https%3A%2F%2Fmedium.com%2F_%2Fbookmark%2Fp%2F777ffea6fabf&operation=register&redirect=https%3A%2F%2Fmedium.com%2Fthe-vue-point%2Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf&source=---footer_actions--777ffea6fabf---------------------bookmark_footer------------------"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" fill="none" viewBox="0 0 25 25" class="du lv" aria-label="Add to list bookmark button"><path fill="currentColor" d="M18 2.5a.5.5 0 0 1 1 0V5h2.5a.5.5 0 0 1 0 1H19v2.5a.5.5 0 1 1-1 0V6h-2.5a.5.5 0 0 1 0-1H18zM7 7a1 1 0 0 1 1-1h3.5a.5.5 0 0 0 0-1H8a2 2 0 0 0-2 2v14a.5.5 0 0 0 .805.396L12.5 17l5.695 4.396A.5.5 0 0 0 19 21v-8.5a.5.5 0 0 0-1 0v7.485l-5.195-4.012a.5.5 0 0 0-.61 0L7 19.985z"></path></svg></a></span></div></div></div><div class="rs l ix"><div class="bm" aria-hidden="false" aria-describedby="postFooterSocialMenu" aria-labelledby="postFooterSocialMenu"><div><div class="bm" aria-hidden="false"><button aria-controls="postFooterSocialMenu" aria-expanded="false" aria-label="Share Post" data-testid="footerSocialShareButton" class="af fk ah ai aj ak al md an ao ap ex me mf lt mg"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" fill="none" viewBox="0 0 24 24"><path fill="currentColor" fill-rule="evenodd" d="M15.218 4.931a.4.4 0 0 1-.118.132l.012.006a.45.45 0 0 1-.292.074.5.5 0 0 1-.3-.13l-2.02-2.02v7.07c0 .28-.23.5-.5.5s-.5-.22-.5-.5v-7.04l-2 2a.45.45 0 0 1-.57.04h-.02a.4.4 0 0 1-.16-.3.4.4 0 0 1 .1-.32l2.8-2.8a.5.5 0 0 1 .7 0l2.8 2.79a.42.42 0 0 1 .068.498m-.106.138.008.004v-.01zM16 7.063h1.5a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-11c-1.1 0-2-.9-2-2v-10a2 2 0 0 1 2-2H8a.5.5 0 0 1 .35.15.5.5 0 0 1 .15.35.5.5 0 0 1-.15.35.5.5 0 0 1-.35.15H6.4c-.5 0-.9.4-.9.9v10.2a.9.9 0 0 0 .9.9h11.2c.5 0 .9-.4.9-.9v-10.2c0-.5-.4-.9-.9-.9H16a.5.5 0 0 1 0-1" clip-rule="evenodd"></path></svg></button></div></div></div></div></div></div></div></div></div></footer><div class="rt l"><div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ru l"><div class="ab rv rw rx iz iy"><div class="ry rz sa sb sc sd se sf sg sh ab cp"><div class="h k"><a href="https://medium.com/the-vue-point?source=post_page---post_publication_info--777ffea6fabf---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="The Vue Point" class="si ib ic cx" src="https://miro.medium.com/v2/resize:fill:96:96/1*yeAO-nwsAqnzr7k-zoDkoQ.png" width="48" height="48" loading="lazy"/><div class="si l ic ib fs n fr sj"></div></div></a></div><div class="j i d"><a href="https://medium.com/the-vue-point?source=post_page---post_publication_info--777ffea6fabf---------------------------------------" rel="noopener follow"><div class="fj ab"><img alt="The Vue Point" class="si sl sk cx" src="https://miro.medium.com/v2/resize:fill:128:128/1*yeAO-nwsAqnzr7k-zoDkoQ.png" width="64" height="64" loading="lazy"/><div class="si l sk sl fs n fr sj"></div></div></a></div><div class="j i d sm ix"><div class="ab"></div></div></div><div class="ab co sn"><div class="so sp sq sr ss l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" href="https://medium.com/the-vue-point?source=post_page---post_publication_info--777ffea6fabf---------------------------------------" rel="noopener follow"><h2 class="pw-author-name bf su sv sw sx sy sz ta ng pr ps nk pu pv no px py bk"><span class="gn st">Published in <!-- -->The Vue Point</span></h2></a><div class="qy ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/the-vue-point/followers?source=post_page---post_publication_info--777ffea6fabf---------------------------------------">16.2K Followers</a></span></div><div class="bf b bg z du ab jb"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/the-vue-point/vue-2-6-released-66aa6c8e785e?source=post_page---post_publication_info--777ffea6fabf---------------------------------------">Last published <span>Feb 4, 2019</span></a></div></div><div class="tb l"><p class="bf b bg z bk"><span class="gn">The Official Vue.js Blog</span></p></div></div></div><div class="h k"><div class="ab"></div></div></div></div><div class="ab rv rw rx iz iy"><div class="ry rz sa sb sc sd se sf sg sh ab cp"><div class="h k"><a tabindex="0" rel="noopener follow" href="/@youyuxi?source=post_page---post_author_info--777ffea6fabf---------------------------------------"><div class="l fj"><img alt="Evan You" class="l fd by ic ib cx" src="https://miro.medium.com/v2/resize:fill:96:96/0*k6Vzz_7jU2jXNEXT.jpeg" width="48" height="48" loading="lazy"/><div class="fr by l ic ib fs n ay sj"></div></div></a></div><div class="j i d"><a tabindex="0" rel="noopener follow" href="/@youyuxi?source=post_page---post_author_info--777ffea6fabf---------------------------------------"><div class="l fj"><img alt="Evan You" class="l fd by sk sl cx" src="https://miro.medium.com/v2/resize:fill:128:128/0*k6Vzz_7jU2jXNEXT.jpeg" width="64" height="64" loading="lazy"/><div class="fr by l sk sl fs n ay sj"></div></div></a></div><div class="j i d sm ix"><div class="ab"><span><button class="bf b bg z tc ra td te tf tg th ev ew ti tj tk fa fb fc fd bm fe ff">Follow</button></span></div></div></div><div class="ab co sn"><div class="so sp sq sr ss l"><a class="af ag ah aj ak al am an ao ap aq ar as at ab q" rel="noopener follow" href="/@youyuxi?source=post_page---post_author_info--777ffea6fabf---------------------------------------"><h2 class="pw-author-name bf su sv sw sx sy sz ta ng pr ps nk pu pv no px py bk"><span class="gn st">Written by <!-- -->Evan You</span></h2></a><div class="qy ab ia"><div class="l ix"><span class="pw-follower-count bf b bg z du"><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@youyuxi/followers?source=post_page---post_author_info--777ffea6fabf---------------------------------------">27K Followers</a></span></div><div class="bf b bg z du ab jb"><span class="ir l" aria-hidden="true"><span class="bf b bg z du">·</span></span><a class="af ag ah ai aj ak al am an ao ap aq ar iq" rel="noopener follow" href="/@youyuxi/following?source=post_page---post_author_info--777ffea6fabf---------------------------------------">461 Following</a></div></div><div class="tb l"><p class="bf b bg z bk"><span class="gn">Creator and project lead of Vue.js. I design, code and sometimes dream about making art.</span></p></div></div></div><div class="h k"><div class="ab"><span><button class="bf b bg z tc ra td te tf tg th ev ew ti tj tk fa fb fc fd bm fe ff">Follow</button></span></div></div></div></div></div></div></div><div class="tl tm tn to tp l"><div class="tq bh r rt"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="ab q cp"><h2 class="bf su ol on oo op or os ot ov ow ox oz pa pb pd pe bk">Responses (<!-- -->72<!-- -->)</h2><div class="ab tr"><div><div class="bm" aria-hidden="false"><a class="ts tt" href="https://policy.medium.com/medium-rules-30e5502c4eb4?source=post_page---post_responses--777ffea6fabf---------------------------------------" rel="noopener follow" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" d="M11.987 5.036a.754.754 0 0 1 .914-.01c.972.721 1.767 1.218 2.6 1.543.828.322 1.719.485 2.887.505a.755.755 0 0 1 .741.757c-.018 3.623-.43 6.256-1.449 8.21-1.034 1.984-2.662 3.209-4.966 4.083a.75.75 0 0 1-.537-.003c-2.243-.874-3.858-2.095-4.897-4.074-1.024-1.951-1.457-4.583-1.476-8.216a.755.755 0 0 1 .741-.757c1.195-.02 2.1-.182 2.923-.503.827-.322 1.6-.815 2.519-1.535m.468.903c-.897.69-1.717 1.21-2.623 1.564-.898.35-1.856.527-3.026.565.037 3.45.469 5.817 1.36 7.515.884 1.684 2.25 2.762 4.284 3.571 2.092-.81 3.465-1.89 4.344-3.575.886-1.698 1.299-4.065 1.334-7.512-1.149-.039-2.091-.217-2.99-.567-.906-.353-1.745-.873-2.683-1.561m-.009 9.155a2.672 2.672 0 1 0 0-5.344 2.672 2.672 0 0 0 0 5.344m0 1a3.672 3.672 0 1 0 0-7.344 3.672 3.672 0 0 0 0 7.344m-1.813-3.777.525-.526.916.917 1.623-1.625.526.526-2.149 2.152z" clip-rule="evenodd"></path></svg></a></div></div></div></div><div class="tu tv tw tx ty tz ua l"></div><div class="ub l"><button class="bf b bg z bk ra uc ud ue lv ls th ev ew ex uf ug uh fa ui uj uk ul um fb fc fd bm fe ff">See all responses</button></div></div></div></div><div class="un uo up uq ur l bx"><div class="h k j"><div class="tq bh us ut"></div><div class="ab cb"><div class="ci bh fz ga gb gc"><div class="uu ab kt ja"><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://help.medium.com/hc/en-us?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Help</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://medium.statuspage.io/?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Status</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/about?autoplay=1&source=post_page-----777ffea6fabf---------------------------------------"><p class="bf b dv z du">About</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/jobs-at-medium/work-at-medium-959d1a85284e?source=post_page-----777ffea6fabf---------------------------------------"><p class="bf b dv z du">Careers</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="mailto:pressinquiries@medium.com" rel="noopener follow"><p class="bf b dv z du">Press</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://blog.medium.com/?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Blog</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-privacy-policy-f03bf92035c9?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Privacy</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://policy.medium.com/medium-terms-of-service-9db0094a1e0f?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Terms</p></a></div><div class="uv uw l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" href="https://speechify.com/medium?source=post_page-----777ffea6fabf---------------------------------------" rel="noopener follow"><p class="bf b dv z du">Text to speech</p></a></div><div class="uv l"><a class="af ag ah ai aj ak al am an ao ap aq ar as at" rel="noopener follow" href="/business?source=post_page-----777ffea6fabf---------------------------------------"><p class="bf b dv z du">Teams</p></a></div></div></div></div></div></div></div></div></div></div><script>window.__BUILD_ID__="main-20250217-152844-ca206ec2ba"</script><script>window.__GRAPHQL_URI__ = "https://medium.com/_/graphql"</script><script>window.__PRELOADED_STATE__ = {"algolia":{"queries":{}},"cache":{"experimentGroupSet":true,"reason":"","group":"enabled","tags":["group-edgeCachePosts","post-777ffea6fabf","user-4f198f5f1f12","collection-4b3ffc258019"],"serverVariantState":"44136fa355b3678a1146ad16f7e8649e94fb4fc21fe77e8310c060f61caaff8a","middlewareEnabled":true,"cacheStatus":"DYNAMIC","shouldUseCache":true,"vary":[],"pubFeaturingPostPageLabelEnabled":false},"client":{"hydrated":false,"isUs":false,"isNativeMedium":false,"isSafariMobile":true,"isSafari":true,"isFirefox":false,"routingEntity":{"type":"DEFAULT","explicit":false},"viewerIsBot":false},"debug":{"requestId":"87658f5a-282e-4faa-ae59-c66aea9ded63","requestTag":"","hybridDevServices":[],"originalSpanCarrier":{"traceparent":"00-ad3dea95b3621665fae68c443d3ae648-ea1cc783569061f0-01"}},"multiVote":{"clapsPerPost":{}},"navigation":{"branch":{"show":null,"hasRendered":null,"blockedByCTA":false},"hideGoogleOneTap":false,"hasRenderedAlternateUserBanner":null,"currentLocation":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf","host":"medium.com","hostname":"medium.com","referrer":"","hasSetReferrer":false,"susiModal":{"step":null,"operation":"register"},"postRead":false,"partnerProgram":{"selectedCountryCode":null},"queryString":"","currentHash":""},"config":{"nodeEnv":"production","version":"main-20250217-152844-ca206ec2ba","target":"production","productName":"Medium","publicUrl":"https:\u002F\u002Fcdn-client.medium.com\u002Flite","authDomain":"medium.com","authGoogleClientId":"216296035834-k1k6qe060s2tp2a2jam4ljdcms00sttg.apps.googleusercontent.com","favicon":"production","glyphUrl":"https:\u002F\u002Fglyph.medium.com","branchKey":"key_live_ofxXr2qTrrU9NqURK8ZwEhknBxiI6KBm","algolia":{"appId":"MQ57UUUQZ2","apiKeySearch":"394474ced050e3911ae2249ecc774921","indexPrefix":"medium_","host":"-dsn.algolia.net"},"recaptchaKey":"6Lfc37IUAAAAAKGGtC6rLS13R1Hrw_BqADfS1LRk","recaptcha3Key":"6Lf8R9wUAAAAABMI_85Wb8melS7Zj6ziuf99Yot5","recaptchaEnterpriseKeyId":"6Le-uGgpAAAAAPprRaokM8AKthQ9KNGdoxaGUvVp","datadog":{"applicationId":"6702d87d-a7e0-42fe-bbcb-95b469547ea0","clientToken":"pub853ea8d17ad6821d9f8f11861d23dfed","rumToken":"pubf9cc52896502b9413b68ba36fc0c7162","context":{"deployment":{"target":"production","tag":"main-20250217-152844-ca206ec2ba","commit":"ca206ec2ba708507b1bef4ec007a67163085196c"}},"datacenter":"us"},"googleAnalyticsCode":"G-7JY7T788PK","googlePay":{"apiVersion":"2","apiVersionMinor":"0","merchantId":"BCR2DN6TV7EMTGBM","merchantName":"Medium","instanceMerchantId":"13685562959212738550"},"applePay":{"version":3},"signInWallCustomDomainCollectionIds":["3a8144eabfe3","336d898217ee","61061eb0c96b","138adf9c44c","819cc2aaeee0"],"mediumMastodonDomainName":"me.dm","mediumOwnedAndOperatedCollectionIds":["8a9336e5bb4","b7e45b22fec3","193b68bd4fba","8d6b8a439e32","54c98c43354d","3f6ecf56618","d944778ce714","92d2092dc598","ae2a65f35510","1285ba81cada","544c7006046e","fc8964313712","40187e704f1c","88d9857e584e","7b6769f2748b","bcc38c8f6edf","cef6983b292","cb8577c9149e","444d13b52878","713d7dbc99b0","ef8e90590e66","191186aaafa0","55760f21cdc5","9dc80918cc93","bdc4052bbdba","8ccfed20cbb2"],"tierOneDomains":["medium.com","thebolditalic.com","arcdigital.media","towardsdatascience.com","uxdesign.cc","codeburst.io","psiloveyou.xyz","writingcooperative.com","entrepreneurshandbook.co","prototypr.io","betterhumans.coach.me","theascent.pub"],"topicsToFollow":["d61cf867d93f","8a146bc21b28","1eca0103fff3","4d562ee63426","aef1078a3ef5","e15e46793f8d","6158eb913466","55f1c20aba7a","3d18b94f6858","4861fee224fd","63c6f1f93ee","1d98b3a9a871","decb52b64abf","ae5d4995e225","830cded25262"],"topicToTagMappings":{"accessibility":"accessibility","addiction":"addiction","android-development":"android-development","art":"art","artificial-intelligence":"artificial-intelligence","astrology":"astrology","basic-income":"basic-income","beauty":"beauty","biotech":"biotech","blockchain":"blockchain","books":"books","business":"business","cannabis":"cannabis","cities":"cities","climate-change":"climate-change","comics":"comics","coronavirus":"coronavirus","creativity":"creativity","cryptocurrency":"cryptocurrency","culture":"culture","cybersecurity":"cybersecurity","data-science":"data-science","design":"design","digital-life":"digital-life","disability":"disability","economy":"economy","education":"education","equality":"equality","family":"family","feminism":"feminism","fiction":"fiction","film":"film","fitness":"fitness","food":"food","freelancing":"freelancing","future":"future","gadgets":"gadgets","gaming":"gaming","gun-control":"gun-control","health":"health","history":"history","humor":"humor","immigration":"immigration","ios-development":"ios-development","javascript":"javascript","justice":"justice","language":"language","leadership":"leadership","lgbtqia":"lgbtqia","lifestyle":"lifestyle","machine-learning":"machine-learning","makers":"makers","marketing":"marketing","math":"math","media":"media","mental-health":"mental-health","mindfulness":"mindfulness","money":"money","music":"music","neuroscience":"neuroscience","nonfiction":"nonfiction","outdoors":"outdoors","parenting":"parenting","pets":"pets","philosophy":"philosophy","photography":"photography","podcasts":"podcast","poetry":"poetry","politics":"politics","privacy":"privacy","product-management":"product-management","productivity":"productivity","programming":"programming","psychedelics":"psychedelics","psychology":"psychology","race":"race","relationships":"relationships","religion":"religion","remote-work":"remote-work","san-francisco":"san-francisco","science":"science","self":"self","self-driving-cars":"self-driving-cars","sexuality":"sexuality","social-media":"social-media","society":"society","software-engineering":"software-engineering","space":"space","spirituality":"spirituality","sports":"sports","startups":"startup","style":"style","technology":"technology","transportation":"transportation","travel":"travel","true-crime":"true-crime","tv":"tv","ux":"ux","venture-capital":"venture-capital","visual-design":"visual-design","work":"work","world":"world","writing":"writing"},"defaultImages":{"avatar":{"imageId":"1*dmbNkD5D-u45r44go_cf0g.png","height":150,"width":150},"orgLogo":{"imageId":"7*V1_7XP4snlmqrc_0Njontw.png","height":110,"width":500},"postLogo":{"imageId":"bd978bb536350a710e8efb012513429cabdc4c28700604261aeda246d0f980b7","height":810,"width":1440},"postPreviewImage":{"imageId":"1*hn4v1tCaJy7cWMyb0bpNpQ.png","height":386,"width":579}},"collectionStructuredData":{"8d6b8a439e32":{"name":"Elemental","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F980\u002F1*9ygdqoKprhwuTVKUM0DLPA@2x.png","width":980,"height":159}}},"3f6ecf56618":{"name":"Forge","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F596\u002F1*uULpIlImcO5TDuBZ6lm7Lg@2x.png","width":596,"height":183}}},"ae2a65f35510":{"name":"GEN","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F264\u002F1*RdVZMdvfV3YiZTw6mX7yWA.png","width":264,"height":140}}},"88d9857e584e":{"name":"LEVEL","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*JqYMhNX6KNNb2UlqGqO2WQ.png","width":540,"height":108}}},"7b6769f2748b":{"name":"Marker","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fcdn-images-1.medium.com\u002Fmax\u002F383\u002F1*haCUs0wF6TgOOvfoY-jEoQ@2x.png","width":383,"height":92}}},"444d13b52878":{"name":"OneZero","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*cw32fIqCbRWzwJaoQw6BUg.png","width":540,"height":123}}},"8ccfed20cbb2":{"name":"Zora","data":{"@type":"NewsMediaOrganization","ethicsPolicy":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Farticles\u002F360043290473","logo":{"@type":"ImageObject","url":"https:\u002F\u002Fmiro.medium.com\u002Fmax\u002F540\u002F1*tZUQqRcCCZDXjjiZ4bDvgQ.png","width":540,"height":106}}}},"embeddedPostIds":{"coronavirus":"cd3010f9d81f"},"sharedCdcMessaging":{"COVID_APPLICABLE_TAG_SLUGS":[],"COVID_APPLICABLE_TOPIC_NAMES":[],"COVID_APPLICABLE_TOPIC_NAMES_FOR_TOPIC_PAGE":[],"COVID_MESSAGES":{"tierA":{"text":"For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":66,"end":73,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"tierB":{"text":"Anyone can publish on Medium per our Policies, but we don’t fact-check every story. For more info about the coronavirus, see cdc.gov.","markups":[{"start":37,"end":45,"href":"https:\u002F\u002Fhelp.medium.com\u002Fhc\u002Fen-us\u002Fcategories\u002F201931128-Policies-Safety"},{"start":125,"end":132,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"paywall":{"text":"This article has been made free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":56,"end":70,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":138,"end":145,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]},"unbound":{"text":"This article is free for everyone, thanks to Medium Members. For more information on the novel coronavirus and Covid-19, visit cdc.gov.","markups":[{"start":45,"end":59,"href":"https:\u002F\u002Fmedium.com\u002Fmembership"},{"start":127,"end":134,"href":"https:\u002F\u002Fwww.cdc.gov\u002Fcoronavirus\u002F2019-nCoV"}]}},"COVID_BANNER_POST_ID_OVERRIDE_WHITELIST":["3b31a67bff4a"]},"sharedVoteMessaging":{"TAGS":["politics","election-2020","government","us-politics","election","2020-presidential-race","trump","donald-trump","democrats","republicans","congress","republican-party","democratic-party","biden","joe-biden","maga"],"TOPICS":["politics","election"],"MESSAGE":{"text":"Find out more about the U.S. election results here.","markups":[{"start":46,"end":50,"href":"https:\u002F\u002Fcookpolitical.com\u002F2020-national-popular-vote-tracker"}]},"EXCLUDE_POSTS":["397ef29e3ca5"]},"embedPostRules":[],"recircOptions":{"v1":{"limit":3},"v2":{"limit":8}},"braintreeClientKey":"production_zjkj96jm_m56f8fqpf7ngnrd4","braintree":{"enabled":true,"merchantId":"m56f8fqpf7ngnrd4","merchantAccountId":{"usd":"AMediumCorporation_instant","eur":"amediumcorporation_EUR","cad":"amediumcorporation_CAD"},"publicKey":"ds2nn34bg2z7j5gd","braintreeEnvironment":"production","dashboardUrl":"https:\u002F\u002Fwww.braintreegateway.com\u002Fmerchants","gracePeriodDurationInDays":14,"mediumMembershipPlanId":{"monthly":"ce105f8c57a3","monthlyV2":"e8a5e126-792b-4ee6-8fba-d574c1b02fc5","monthlyWithTrial":"d5ee3dbe3db8","monthlyPremium":"fa741a9b47a2","yearly":"a40ad4a43185","yearlyV2":"3815d7d6-b8ca-4224-9b8c-182f9047866e","yearlyStaff":"d74fb811198a","yearlyWithTrial":"b3bc7350e5c7","yearlyPremium":"e21bd2c12166","monthlyOneYearFree":"e6c0637a-2bad-4171-ab4f-3c268633d83c","monthly25PercentOffFirstYear":"235ecc62-0cdb-49ae-9378-726cd21c504b","monthly20PercentOffFirstYear":"ba518864-9c13-4a99-91ca-411bf0cac756","monthly15PercentOffFirstYear":"594c029b-9f89-43d5-88f8-8173af4e070e","monthly10PercentOffFirstYear":"c6c7bc9a-40f2-4b51-8126-e28511d5bdb0","monthlyForStudents":"629ebe51-da7d-41fd-8293-34cd2f2030a8","yearlyOneYearFree":"78ba7be9-0d9f-4ece-aa3e-b54b826f2bf1","yearly25PercentOffFirstYear":"2dbb010d-bb8f-4eeb-ad5c-a08509f42d34","yearly20PercentOffFirstYear":"47565488-435b-47f8-bf93-40d5fbe0ebc8","yearly15PercentOffFirstYear":"8259809b-0881-47d9-acf7-6c001c7f720f","yearly10PercentOffFirstYear":"9dd694fb-96e1-472c-8d9e-3c868d5c1506","yearlyForStudents":"e29345ef-ab1c-4234-95c5-70e50fe6bc23","monthlyCad":"p52orjkaceei","yearlyCad":"h4q9g2up9ktt"},"braintreeDiscountId":{"oneMonthFree":"MONTHS_FREE_01","threeMonthsFree":"MONTHS_FREE_03","sixMonthsFree":"MONTHS_FREE_06","fiftyPercentOffOneYear":"FIFTY_PERCENT_OFF_ONE_YEAR"},"3DSecureVersion":"2","defaultCurrency":"usd","providerPlanIdCurrency":{"4ycw":"usd","rz3b":"usd","3kqm":"usd","jzw6":"usd","c2q2":"usd","nnsw":"usd","q8qw":"usd","d9y6":"usd","fx7w":"cad","nwf2":"cad"}},"paypalClientId":"AXj1G4fotC2GE8KzWX9mSxCH1wmPE3nJglf4Z2ig_amnhvlMVX87otaq58niAg9iuLktVNF_1WCMnN7v","paypal":{"host":"https:\u002F\u002Fapi.paypal.com:443","clientMode":"production","serverMode":"live","webhookId":"4G466076A0294510S","monthlyPlan":{"planId":"P-9WR0658853113943TMU5FDQA","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlan":{"planId":"P-7N8963881P8875835MU5JOPQ","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oneYearGift":{"name":"Medium Membership (1 Year, Digital Gift Code)","description":"Unlimited access to the best and brightest stories on Medium. Gift codes can be redeemed at medium.com\u002Fredeem.","price":"50.00","currency":"USD","sku":"membership-gift-1-yr"},"oldMonthlyPlan":{"planId":"P-96U02458LM656772MJZUVH2Y","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlan":{"planId":"P-59P80963JF186412JJZU3SMI","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"monthlyPlanWithTrial":{"planId":"P-66C21969LR178604GJPVKUKY","name":"Medium Membership (Monthly) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"yearlyPlanWithTrial":{"planId":"P-6XW32684EX226940VKCT2MFA","name":"Medium Membership (Annual) with setup fee","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"oldMonthlyPlanNoSetupFee":{"planId":"P-4N046520HR188054PCJC7LJI","name":"Medium Membership (Monthly)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed monthly."},"oldYearlyPlanNoSetupFee":{"planId":"P-7A4913502Y5181304CJEJMXQ","name":"Medium Membership (Annual)","description":"Unlimited access to the best and brightest stories on Medium. Membership billed annually."},"sdkUrl":"https:\u002F\u002Fwww.paypal.com\u002Fsdk\u002Fjs"},"stripePublishableKey":"pk_live_7FReX44VnNIInZwrIIx6ghjl","log":{"json":true,"level":"info"},"imageUploadMaxSizeMb":25,"staffPicks":{"title":"Staff Picks","catalogId":"c7bc6e1ee00f"}},"session":{"xsrf":""}}</script><script>window.__APOLLO_STATE__ = {"ROOT_QUERY":{"__typename":"Query","viewer":null,"collectionByDomainOrSlug({\"domainOrSlug\":\"the-vue-point\"})":{"__ref":"Collection:4b3ffc258019"},"postResult({\"id\":\"777ffea6fabf\"})":{"__ref":"Post:777ffea6fabf"}},"ImageMetadata:":{"__typename":"ImageMetadata","id":"","originalWidth":0,"originalHeight":0},"Collection:4b3ffc258019":{"__typename":"Collection","id":"4b3ffc258019","favicon":{"__ref":"ImageMetadata:"},"customStyleSheet":null,"colorPalette":{"__typename":"ColorPalette","highlightSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FFE1FAE9","point":0},{"__typename":"ColorPoint","color":"#FFDBF9E5","point":0.1},{"__typename":"ColorPoint","color":"#FFD6F9E2","point":0.2},{"__typename":"ColorPoint","color":"#FFD0F9DF","point":0.3},{"__typename":"ColorPoint","color":"#FFC9F8DB","point":0.4},{"__typename":"ColorPoint","color":"#FFC3F8D8","point":0.5},{"__typename":"ColorPoint","color":"#FFBCF7D4","point":0.6},{"__typename":"ColorPoint","color":"#FFB6F7D1","point":0.7},{"__typename":"ColorPoint","color":"#FFAFF6CD","point":0.8},{"__typename":"ColorPoint","color":"#FFA8F6CA","point":0.9},{"__typename":"ColorPoint","color":"#FFA0F5C6","point":1}]},"defaultBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FFFFFFFF","colorPoints":[{"__typename":"ColorPoint","color":"#FF189C68","point":0},{"__typename":"ColorPoint","color":"#FF219062","point":0.1},{"__typename":"ColorPoint","color":"#FF26855B","point":0.2},{"__typename":"ColorPoint","color":"#FF287954","point":0.3},{"__typename":"ColorPoint","color":"#FF286D4D","point":0.4},{"__typename":"ColorPoint","color":"#FF276145","point":0.5},{"__typename":"ColorPoint","color":"#FF25543D","point":0.6},{"__typename":"ColorPoint","color":"#FF224734","point":0.7},{"__typename":"ColorPoint","color":"#FF1D3A2B","point":0.8},{"__typename":"ColorPoint","color":"#FF172C21","point":0.9},{"__typename":"ColorPoint","color":"#FF0F1E15","point":1}]},"tintBackgroundSpectrum":{"__typename":"ColorSpectrum","backgroundColor":"#FF42B983","colorPoints":[{"__typename":"ColorPoint","color":"#FF42B983","point":0},{"__typename":"ColorPoint","color":"#FF5AC28F","point":0.1},{"__typename":"ColorPoint","color":"#FF6FCA9B","point":0.2},{"__typename":"ColorPoint","color":"#FF82D2A7","point":0.3},{"__typename":"ColorPoint","color":"#FF94DAB2","point":0.4},{"__typename":"ColorPoint","color":"#FFA5E1BE","point":0.5},{"__typename":"ColorPoint","color":"#FFB5E9C9","point":0.6},{"__typename":"ColorPoint","color":"#FFC4F0D5","point":0.7},{"__typename":"ColorPoint","color":"#FFD4F7E0","point":0.8},{"__typename":"ColorPoint","color":"#FFE3FEEC","point":0.9},{"__typename":"ColorPoint","color":"#FFF1FFF7","point":1}]}},"domain":null,"slug":"the-vue-point","googleAnalyticsId":null,"name":"The Vue Point","avatar":{"__ref":"ImageMetadata:1*yeAO-nwsAqnzr7k-zoDkoQ.png"},"description":"The Official Vue.js Blog","subscriberCount":16271,"latestPostsConnection({\"paging\":{\"limit\":1}})":{"__typename":"PostConnection","posts":[{"__ref":"Post:66aa6c8e785e"}]},"isAuroraVisible":false,"tintColor":"#FF42B983","newsletterV3":null,"viewerEdge":{"__ref":"CollectionViewerEdge:collectionId:4b3ffc258019-viewerId:lo_242c7e455e98"},"twitterUsername":"vuejs","facebookPageId":null,"logo":{"__ref":"ImageMetadata:"}},"ImageMetadata:1*yeAO-nwsAqnzr7k-zoDkoQ.png":{"__typename":"ImageMetadata","id":"1*yeAO-nwsAqnzr7k-zoDkoQ.png"},"User:4f198f5f1f12":{"__typename":"User","id":"4f198f5f1f12","customDomainState":null,"hasSubdomain":false,"username":"youyuxi","linkedAccounts":{"__ref":"LinkedAccounts:4f198f5f1f12"},"isSuspended":false,"name":"Evan You","imageId":"0*k6Vzz_7jU2jXNEXT.jpeg","verifications":{"__typename":"VerifiedInfo","isBookAuthor":false},"socialStats":{"__typename":"SocialStats","followerCount":27338,"followingCount":441,"collectionFollowingCount":20},"bio":"Creator and project lead of Vue.js. I design, code and sometimes dream about making art.","membership":null,"allowNotes":true,"viewerEdge":{"__ref":"UserViewerEdge:userId:4f198f5f1f12-viewerId:lo_242c7e455e98"},"twitterScreenName":"youyuxi"},"Post:66aa6c8e785e":{"__typename":"Post","id":"66aa6c8e785e","firstPublishedAt":1549296755321,"creator":{"__ref":"User:4f198f5f1f12"},"collection":{"__ref":"Collection:4b3ffc258019"},"isSeries":false,"mediumUrl":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fvue-2-6-released-66aa6c8e785e","sequence":null,"uniqueSlug":"vue-2-6-released-66aa6c8e785e"},"LinkedAccounts:4f198f5f1f12":{"__typename":"LinkedAccounts","mastodon":null,"id":"4f198f5f1f12"},"Topic:63c6f1f93ee":{"__typename":"Topic","slug":"javascript","id":"63c6f1f93ee","name":"Javascript"},"Paragraph:a30f44744dcd_0":{"__typename":"Paragraph","id":"a30f44744dcd_0","name":"3c09","type":"H3","href":null,"layout":null,"metadata":null,"text":"Plans for the Next Iteration of Vue.js","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_1":{"__typename":"Paragraph","id":"a30f44744dcd_1","name":"c723","type":"P","href":null,"layout":null,"metadata":null,"text":"Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth overview of the plan.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":13,"end":26,"href":"https:\u002F\u002Fvuejs.london\u002Fsummary","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*vFC8tDUGLlXIiqT7ymf3xg.png":{"__typename":"ImageMetadata","id":"1*vFC8tDUGLlXIiqT7ymf3xg.png","originalHeight":1486,"originalWidth":1051,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:a30f44744dcd_2":{"__typename":"Paragraph","id":"a30f44744dcd_2","name":"1749","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*vFC8tDUGLlXIiqT7ymf3xg.png"},"text":"","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_3":{"__typename":"Paragraph","id":"a30f44744dcd_3","name":"3faf","type":"H3","href":null,"layout":null,"metadata":null,"text":"Why a new major version?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_4":{"__typename":"Paragraph","id":"a30f44744dcd_4","name":"830d","type":"P","href":null,"layout":null,"metadata":null,"text":"Vue 2.0 was released exactly two years ago (how time flies!). During this period, the core has remained backwards compatible with five minor releases. We’ve accumulated a number of ideas that would bring improvements, but they were held off because they would result in breaking changes. At the same time, the JavaScript ecosystem and the language itself has been evolving rapidly. There are greatly improved tools that could enhance our workflow, and many new language features that could unlock simpler, more complete, and more efficient solutions to the problems Vue is trying to solve. What’s more exciting is that we are seeing ES2015 support becoming a baseline for all major evergreen browsers. Vue 3.0 aims to leverage these new language features to make Vue core smaller, faster, and more powerful.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":21,"end":42,"href":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fvue-2-0-is-here-ef1f26acf4b8","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_5":{"__typename":"Paragraph","id":"a30f44744dcd_5","name":"506c","type":"P","href":null,"layout":null,"metadata":null,"text":"Vue 3.0 is currently in prototyping phase, and we have already implemented a runtime close to feature-parity with 2.x. 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 *.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"STRONG","start":119,"end":295,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_6":{"__typename":"Paragraph","id":"a30f44744dcd_6","name":"1842","type":"H3","href":null,"layout":null,"metadata":null,"text":"The Details","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_7":{"__typename":"Paragraph","id":"a30f44744dcd_7","name":"f25a","type":"H4","href":null,"layout":null,"metadata":null,"text":"High-Level API Changes","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_8":{"__typename":"Paragraph","id":"a30f44744dcd_8","name":"873d","type":"BQ","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_9":{"__typename":"Paragraph","id":"a30f44744dcd_9","name":"e6bc","type":"P","href":null,"layout":null,"metadata":null,"text":"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:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_10":{"__typename":"Paragraph","id":"a30f44744dcd_10","name":"60e3","type":"ULI","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_11":{"__typename":"Paragraph","id":"a30f44744dcd_11","name":"087d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"̶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̶ . Update: the Class API draft has been dropped. We have published a new function-based API proposal that provides better logic composition, better TypeScript support, and compatible with 2.x API.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":170,"end":197,"href":"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frfcs\u002Fpull\u002F42","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":100,"end":293,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_12":{"__typename":"Paragraph","id":"a30f44744dcd_12","name":"f646","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Mixins will still be supported.*","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_13":{"__typename":"Paragraph","id":"a30f44744dcd_13","name":"ddf4","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Top level APIs will likely receive an overhaul to avoid globally mutating the Vue runtime when installing plugins. Instead, plugins will be applied and scoped to a component tree. This will make it easier to test components that rely on specific plugins, and also make it possible to mount multiple Vue applications on the same page with different plugins, but using the same Vue runtime.* (Update: related RFC)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":399,"end":410,"href":"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frfcs\u002Fpull\u002F29","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":390,"end":411,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_14":{"__typename":"Paragraph","id":"a30f44744dcd_14","name":"024d","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Functional components can finally be plain functions —however, async components will now need to be explicitly created via a helper function. (Update: related RFC)","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":151,"end":162,"href":"https:\u002F\u002Fgithub.com\u002Fvuejs\u002Frfcs\u002Fpull\u002F27","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"EM","start":142,"end":163,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_15":{"__typename":"Paragraph","id":"a30f44744dcd_15","name":"d6b3","type":"ULI","href":null,"layout":null,"metadata":null,"text":"The part that will receive the most changes is the Virtual DOM format used in render functions. We are currently collecting feedback from major library authors and will be sharing more details as we are more confident of the changes, but as long as you don’t heavily rely on hand-written (non-JSX) render functions in your app, upgrading should be a reasonably straightforward process.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_16":{"__typename":"Paragraph","id":"a30f44744dcd_16","name":"1855","type":"H4","href":null,"layout":null,"metadata":null,"text":"Source Code Architecture","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_17":{"__typename":"Paragraph","id":"a30f44744dcd_17","name":"eca2","type":"BQ","href":null,"layout":null,"metadata":null,"text":"TL;DR: better decoupled internal modules, TypeScript, and a codebase that is easier to contribute to.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_18":{"__typename":"Paragraph","id":"a30f44744dcd_18","name":"15e9","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_19":{"__typename":"Paragraph","id":"a30f44744dcd_19","name":"9879","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_20":{"__typename":"Paragraph","id":"a30f44744dcd_20","name":"6a59","type":"P","href":null,"layout":null,"metadata":null,"text":"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 requestIdleCallback to yield to the browser during long updates.*","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":281,"end":300,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*H8yM0usFhWYlY6GV2wcrEw.png":{"__typename":"ImageMetadata","id":"1*H8yM0usFhWYlY6GV2wcrEw.png","originalHeight":716,"originalWidth":460,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:a30f44744dcd_21":{"__typename":"Paragraph","id":"a30f44744dcd_21","name":"1d4d","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*H8yM0usFhWYlY6GV2wcrEw.png"},"text":"Sneak peek of the new source code structure (subject to change)","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_22":{"__typename":"Paragraph","id":"a30f44744dcd_22","name":"ba44","type":"H4","href":null,"layout":null,"metadata":null,"text":"Observation Mechanism","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_23":{"__typename":"Paragraph","id":"a30f44744dcd_23","name":"1d8c","type":"BQ","href":null,"layout":null,"metadata":null,"text":"TL;DR: more complete, precise, efficient and debuggable reactivity tracking & API for creating observables.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_24":{"__typename":"Paragraph","id":"a30f44744dcd_24","name":"7a7b","type":"P","href":null,"layout":null,"metadata":null,"text":"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 Object.defineProperty :","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":203,"end":224,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_25":{"__typename":"Paragraph","id":"a30f44744dcd_25","name":"e40a","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Detection of property addition \u002F deletion","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_26":{"__typename":"Paragraph","id":"a30f44744dcd_26","name":"8ed1","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Detection of Array index mutation \u002F .length mutation","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_27":{"__typename":"Paragraph","id":"a30f44744dcd_27","name":"2ae7","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Support for Map, Set, WeakMap and WeakSet","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_28":{"__typename":"Paragraph","id":"a30f44744dcd_28","name":"c8ce","type":"P","href":null,"layout":null,"metadata":null,"text":"The new observer also features the following:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_29":{"__typename":"Paragraph","id":"a30f44744dcd_29","name":"67fc","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Exposed API for creating observables. This offers a light-weight, dead simple cross-component state management solution for small to medium scale scenarios.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_30":{"__typename":"Paragraph","id":"a30f44744dcd_30","name":"4d42","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Lazy observation by default. In 2.x, any reactive data, regardless of how big it is, will be observed on startup. This can cause a noticeable overhead on app startup if your dataset is huge. In 3.x, only data used to render the initially visible part of your app will need to be observed, not to mention the observation itself is also much faster.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_31":{"__typename":"Paragraph","id":"a30f44744dcd_31","name":"b80c","type":"ULI","href":null,"layout":null,"metadata":null,"text":"More precise change notification. An example: in 2.x, force adding a new property using Vue.set will cause any watcher that depends on the object to re-evaluate. In 3.x, only watchers that relies on that specific property will be notified.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":88,"end":95,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_32":{"__typename":"Paragraph","id":"a30f44744dcd_32","name":"3a16","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Immutable observables: we can create “immutable” versions of a value that prevents mutations even on nested properties, except when the system temporarily unlocks it internally. This mechanism can be used to freeze passed-down props or Vuex state trees outside mutations.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_33":{"__typename":"Paragraph","id":"a30f44744dcd_33","name":"3080","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Better debugging capabilities: we can precisely trace when and why a component re-render is tracked or triggered using the new renderTracked and renderTriggered hooks:","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":127,"end":140,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":145,"end":160,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"ImageMetadata:1*waSYB1v2aRgUFx21-JSwRg.png":{"__typename":"ImageMetadata","id":"1*waSYB1v2aRgUFx21-JSwRg.png","originalHeight":1936,"originalWidth":2824,"focusPercentX":null,"focusPercentY":null,"alt":null},"Paragraph:a30f44744dcd_34":{"__typename":"Paragraph","id":"a30f44744dcd_34","name":"7616","type":"IMG","href":null,"layout":"INSET_CENTER","metadata":{"__ref":"ImageMetadata:1*waSYB1v2aRgUFx21-JSwRg.png"},"text":"Easily understand why a component is re-rendering","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_35":{"__typename":"Paragraph","id":"a30f44744dcd_35","name":"d734","type":"H4","href":null,"layout":null,"metadata":null,"text":"Other Runtime Improvements","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_36":{"__typename":"Paragraph","id":"a30f44744dcd_36","name":"fb06","type":"BQ","href":null,"layout":null,"metadata":null,"text":"TL;DR: smaller, faster, tree-shakable features, fragments & portals, custom renderer API.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_37":{"__typename":"Paragraph","id":"a30f44744dcd_37","name":"9886","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Smaller: the new codebase is designed from the ground up to be tree-shaking friendly. Features such as built-in components (\u003Ctransition\u003E, \u003Ckeep-alive\u003E) and directive runtime helpers (v-model) are now imported on-demand and tree-shakable. The constant baseline size for the new runtime is \u003C10kb gzipped. In addition, features being tree-shakable also allows us to offer more built-in features down the road without incurring payload penalties for users that don’t use them.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":124,"end":136,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":138,"end":150,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"CODE","start":183,"end":190,"href":null,"anchorType":null,"userId":null,"linkMetadata":null},{"__typename":"Markup","type":"STRONG","start":238,"end":302,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_38":{"__typename":"Paragraph","id":"a30f44744dcd_38","name":"206a","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Faster: on preliminary benchmarks, we are seeing up to 100% performance improvement across the board, including raw Virtual DOM mounting & patching (we learned quite a few tricks from Inferno, the fastest Virtual DOM implementation out there), component instance initialization and data observation. 3.0 will shave off half the time spent in JavaScript when your app boots up.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":184,"end":191,"href":"https:\u002F\u002Finfernojs.org\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_39":{"__typename":"Paragraph","id":"a30f44744dcd_39","name":"dd42","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Fragments & Portals: despite the size reduction, 3.0 comes with built-in support for Fragments (component returning multiple root nodes) and Portals (rendering a sub-tree in another part of the DOM, instead of inside the component).","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_40":{"__typename":"Paragraph","id":"a30f44744dcd_40","name":"5b54","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Improved slots mechanism: All compiler-generated slots are now functions and invoked during the child component’s render call. This ensures dependencies in slots are collected as dependencies for the child instead of the parent. This means that: 1. when slot content changes, only the child re-renders; 2. when the parent re-renders, the child does not have to if its slot content did not change. This change offers even more precise change detection at the component tree level, so even fewer useless re-renders!","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_41":{"__typename":"Paragraph","id":"a30f44744dcd_41","name":"c0e2","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Custom Renderer API: a first-class API for creating custom renderers will be available, and no longer requires forking the Vue codebase with custom modifications. This will make it much easier for render-to-native projects like Weex and NativeScript Vue to stay up-to-date with upstream changes. It would also make it trivially easy to create custom renderers for various other purposes.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"A","start":228,"end":232,"href":"https:\u002F\u002Fweex-project.io\u002F","anchorType":"LINK","userId":null,"linkMetadata":null},{"__typename":"Markup","type":"A","start":237,"end":253,"href":"https:\u002F\u002Fnativescript-vue.org\u002F","anchorType":"LINK","userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_42":{"__typename":"Paragraph","id":"a30f44744dcd_42","name":"4515","type":"H4","href":null,"layout":null,"metadata":null,"text":"Compiler Improvements*","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_43":{"__typename":"Paragraph","id":"a30f44744dcd_43","name":"92d4","type":"BQ","href":null,"layout":null,"metadata":null,"text":"TL;DR: tree-shaking friendly output, more AOT optimizations, parser with better error info and source map support.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_44":{"__typename":"Paragraph","id":"a30f44744dcd_44","name":"e1ba","type":"ULI","href":null,"layout":null,"metadata":null,"text":"When targeting tree-shaking-capable bundlers, templates that make use of optional features will generate code that imports those features using ES modules syntax. Unused optional features are thus dropped from the final bundle.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_45":{"__typename":"Paragraph","id":"a30f44744dcd_45","name":"6a24","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Due to improvements in the new Virtual DOM implementation, we are also able to perform more effective compile-time optimizations such as static tree hoisting, static props hoisting, compiler-hints for runtime to skip children normalization, VNode creation fast paths, etc…","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_46":{"__typename":"Paragraph","id":"a30f44744dcd_46","name":"f578","type":"ULI","href":null,"layout":null,"metadata":null,"text":"We plan to rewrite the parser to provide location information in template compilation errors. This should also lead to template source map support, and the new parser can serve as the foundation for 3rd party tooling integration, such as eslint-plugin-vue and IDE language services.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":238,"end":255,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_47":{"__typename":"Paragraph","id":"a30f44744dcd_47","name":"df62","type":"H4","href":null,"layout":null,"metadata":null,"text":"IE11 Support*","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_48":{"__typename":"Paragraph","id":"a30f44744dcd_48","name":"e716","type":"BQ","href":null,"layout":null,"metadata":null,"text":"TL;DR: it will be supported, but in a separate build with the same reactivity limitations of Vue 2.x.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_49":{"__typename":"Paragraph","id":"a30f44744dcd_49","name":"fbd8","type":"P","href":null,"layout":null,"metadata":null,"text":"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 \u002F 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 Object.defineProperty API. A separate build of Vue 3.x will be distributed using this observer implementation. However, this build will be subject to the same change detection caveats of Vue 2.x and thus not fully compatible with the “modern” build of 3.x. We are aware that this imposes some inconvenience for library authors as they will need to be aware of compatibility for two different builds, but we will make sure to provide clear guidelines on this when we reach that stage.","hasDropCap":null,"dropCapImage":null,"markups":[{"__typename":"Markup","type":"CODE","start":396,"end":417,"href":null,"anchorType":null,"userId":null,"linkMetadata":null}],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_50":{"__typename":"Paragraph","id":"a30f44744dcd_50","name":"4cbf","type":"H3","href":null,"layout":null,"metadata":null,"text":"How Do We Get There","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_51":{"__typename":"Paragraph","id":"a30f44744dcd_51","name":"dfb9","type":"P","href":null,"layout":null,"metadata":null,"text":"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:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_52":{"__typename":"Paragraph","id":"a30f44744dcd_52","name":"caef","type":"H4","href":null,"layout":null,"metadata":null,"text":"1. Internal Feedback for the Runtime Prototype","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_53":{"__typename":"Paragraph","id":"a30f44744dcd_53","name":"fe69","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_54":{"__typename":"Paragraph","id":"a30f44744dcd_54","name":"c096","type":"H4","href":null,"layout":null,"metadata":null,"text":"2. Public Feedback via RFCs","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_55":{"__typename":"Paragraph","id":"a30f44744dcd_55","name":"578e","type":"P","href":null,"layout":null,"metadata":null,"text":"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:","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_56":{"__typename":"Paragraph","id":"a30f44744dcd_56","name":"758c","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Scope of the change;","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_57":{"__typename":"Paragraph","id":"a30f44744dcd_57","name":"b996","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Reasoning behind the change: what do we gain, and what tradeoffs are being made;","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_58":{"__typename":"Paragraph","id":"a30f44744dcd_58","name":"16ec","type":"ULI","href":null,"layout":null,"metadata":null,"text":"Upgrade path: can it be introduced in a completely backwards-compatible fashion, via a removable compatibility layer, or via codemods?","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_59":{"__typename":"Paragraph","id":"a30f44744dcd_59","name":"3efa","type":"P","href":null,"layout":null,"metadata":null,"text":"We will anticipate public feedback from the wider community to help us consolidate these ideas.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_60":{"__typename":"Paragraph","id":"a30f44744dcd_60","name":"fd3e","type":"H4","href":null,"layout":null,"metadata":null,"text":"3. Introduce Compatible Features in 2.x & 2.x-next","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_61":{"__typename":"Paragraph","id":"a30f44744dcd_61","name":"ca25","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_62":{"__typename":"Paragraph","id":"a30f44744dcd_62","name":"4cab","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_63":{"__typename":"Paragraph","id":"a30f44744dcd_63","name":"7b5c","type":"H4","href":null,"layout":null,"metadata":null,"text":"4. Alpha Phase","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_64":{"__typename":"Paragraph","id":"a30f44744dcd_64","name":"2c1b","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_65":{"__typename":"Paragraph","id":"a30f44744dcd_65","name":"744e","type":"H4","href":null,"layout":null,"metadata":null,"text":"5. Beta Phase","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_66":{"__typename":"Paragraph","id":"a30f44744dcd_66","name":"07e8","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_67":{"__typename":"Paragraph","id":"a30f44744dcd_67","name":"086b","type":"H4","href":null,"layout":null,"metadata":null,"text":"6. RC Phase","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_68":{"__typename":"Paragraph","id":"a30f44744dcd_68","name":"fe82","type":"P","href":null,"layout":null,"metadata":null,"text":"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.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_69":{"__typename":"Paragraph","id":"a30f44744dcd_69","name":"1e76","type":"H4","href":null,"layout":null,"metadata":null,"text":"7. IE11 build","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_70":{"__typename":"Paragraph","id":"a30f44744dcd_70","name":"0df2","type":"P","href":null,"layout":null,"metadata":null,"text":"The last task before the final release will be the IE11 compatibility build as mentioned above.","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_71":{"__typename":"Paragraph","id":"a30f44744dcd_71","name":"1601","type":"H4","href":null,"layout":null,"metadata":null,"text":"8. Final Release","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"Paragraph:a30f44744dcd_72":{"__typename":"Paragraph","id":"a30f44744dcd_72","name":"90e3","type":"P","href":null,"layout":null,"metadata":null,"text":"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!","hasDropCap":null,"dropCapImage":null,"markups":[],"codeBlockMetadata":null,"iframe":null,"mixtapeMetadata":null},"CollectionViewerEdge:collectionId:4b3ffc258019-viewerId:lo_242c7e455e98":{"__typename":"CollectionViewerEdge","id":"collectionId:4b3ffc258019-viewerId:lo_242c7e455e98","isEditor":false,"isMuting":false},"UserViewerEdge:userId:4f198f5f1f12-viewerId:lo_242c7e455e98":{"__typename":"UserViewerEdge","id":"userId:4f198f5f1f12-viewerId:lo_242c7e455e98","isMuting":false},"PostViewerEdge:postId:777ffea6fabf-viewerId:lo_242c7e455e98":{"__typename":"PostViewerEdge","shouldIndexPostForExternalSearch":true,"id":"postId:777ffea6fabf-viewerId:lo_242c7e455e98"},"Tag:javascript":{"__typename":"Tag","id":"javascript","displayTitle":"JavaScript","normalizedTagSlug":"javascript"},"Tag:front-end-development":{"__typename":"Tag","id":"front-end-development","displayTitle":"Front End Development","normalizedTagSlug":"front-end-development"},"Tag:vuejs":{"__typename":"Tag","id":"vuejs","displayTitle":"Vuejs","normalizedTagSlug":"vuejs"},"Tag:vue":{"__typename":"Tag","id":"vue","displayTitle":"Vue","normalizedTagSlug":"vue"},"Post:777ffea6fabf":{"__typename":"Post","id":"777ffea6fabf","collection":{"__ref":"Collection:4b3ffc258019"},"content({\"postMeteringOptions\":{\"referrer\":\"https:\u002F\u002Flearn-anything.xyz\u002F\"}})":{"__typename":"PostContent","isLockedPreviewOnly":false,"bodyModel":{"__typename":"RichText","sections":[{"__typename":"Section","name":"aa7b","startIndex":0,"textLayout":null,"imageLayout":null,"backgroundImage":null,"videoLayout":null,"backgroundVideo":null}],"paragraphs":[{"__ref":"Paragraph:a30f44744dcd_0"},{"__ref":"Paragraph:a30f44744dcd_1"},{"__ref":"Paragraph:a30f44744dcd_2"},{"__ref":"Paragraph:a30f44744dcd_3"},{"__ref":"Paragraph:a30f44744dcd_4"},{"__ref":"Paragraph:a30f44744dcd_5"},{"__ref":"Paragraph:a30f44744dcd_6"},{"__ref":"Paragraph:a30f44744dcd_7"},{"__ref":"Paragraph:a30f44744dcd_8"},{"__ref":"Paragraph:a30f44744dcd_9"},{"__ref":"Paragraph:a30f44744dcd_10"},{"__ref":"Paragraph:a30f44744dcd_11"},{"__ref":"Paragraph:a30f44744dcd_12"},{"__ref":"Paragraph:a30f44744dcd_13"},{"__ref":"Paragraph:a30f44744dcd_14"},{"__ref":"Paragraph:a30f44744dcd_15"},{"__ref":"Paragraph:a30f44744dcd_16"},{"__ref":"Paragraph:a30f44744dcd_17"},{"__ref":"Paragraph:a30f44744dcd_18"},{"__ref":"Paragraph:a30f44744dcd_19"},{"__ref":"Paragraph:a30f44744dcd_20"},{"__ref":"Paragraph:a30f44744dcd_21"},{"__ref":"Paragraph:a30f44744dcd_22"},{"__ref":"Paragraph:a30f44744dcd_23"},{"__ref":"Paragraph:a30f44744dcd_24"},{"__ref":"Paragraph:a30f44744dcd_25"},{"__ref":"Paragraph:a30f44744dcd_26"},{"__ref":"Paragraph:a30f44744dcd_27"},{"__ref":"Paragraph:a30f44744dcd_28"},{"__ref":"Paragraph:a30f44744dcd_29"},{"__ref":"Paragraph:a30f44744dcd_30"},{"__ref":"Paragraph:a30f44744dcd_31"},{"__ref":"Paragraph:a30f44744dcd_32"},{"__ref":"Paragraph:a30f44744dcd_33"},{"__ref":"Paragraph:a30f44744dcd_34"},{"__ref":"Paragraph:a30f44744dcd_35"},{"__ref":"Paragraph:a30f44744dcd_36"},{"__ref":"Paragraph:a30f44744dcd_37"},{"__ref":"Paragraph:a30f44744dcd_38"},{"__ref":"Paragraph:a30f44744dcd_39"},{"__ref":"Paragraph:a30f44744dcd_40"},{"__ref":"Paragraph:a30f44744dcd_41"},{"__ref":"Paragraph:a30f44744dcd_42"},{"__ref":"Paragraph:a30f44744dcd_43"},{"__ref":"Paragraph:a30f44744dcd_44"},{"__ref":"Paragraph:a30f44744dcd_45"},{"__ref":"Paragraph:a30f44744dcd_46"},{"__ref":"Paragraph:a30f44744dcd_47"},{"__ref":"Paragraph:a30f44744dcd_48"},{"__ref":"Paragraph:a30f44744dcd_49"},{"__ref":"Paragraph:a30f44744dcd_50"},{"__ref":"Paragraph:a30f44744dcd_51"},{"__ref":"Paragraph:a30f44744dcd_52"},{"__ref":"Paragraph:a30f44744dcd_53"},{"__ref":"Paragraph:a30f44744dcd_54"},{"__ref":"Paragraph:a30f44744dcd_55"},{"__ref":"Paragraph:a30f44744dcd_56"},{"__ref":"Paragraph:a30f44744dcd_57"},{"__ref":"Paragraph:a30f44744dcd_58"},{"__ref":"Paragraph:a30f44744dcd_59"},{"__ref":"Paragraph:a30f44744dcd_60"},{"__ref":"Paragraph:a30f44744dcd_61"},{"__ref":"Paragraph:a30f44744dcd_62"},{"__ref":"Paragraph:a30f44744dcd_63"},{"__ref":"Paragraph:a30f44744dcd_64"},{"__ref":"Paragraph:a30f44744dcd_65"},{"__ref":"Paragraph:a30f44744dcd_66"},{"__ref":"Paragraph:a30f44744dcd_67"},{"__ref":"Paragraph:a30f44744dcd_68"},{"__ref":"Paragraph:a30f44744dcd_69"},{"__ref":"Paragraph:a30f44744dcd_70"},{"__ref":"Paragraph:a30f44744dcd_71"},{"__ref":"Paragraph:a30f44744dcd_72"}]},"validatedShareKey":"","shareKeyCreator":null},"creator":{"__ref":"User:4f198f5f1f12"},"inResponseToEntityType":null,"isLocked":false,"isMarkedPaywallOnly":false,"lockedSource":"LOCKED_POST_SOURCE_NONE","mediumUrl":"https:\u002F\u002Fmedium.com\u002Fthe-vue-point\u002Fplans-for-the-next-iteration-of-vue-js-777ffea6fabf","primaryTopic":{"__ref":"Topic:63c6f1f93ee"},"topics":[{"__typename":"Topic","slug":"javascript"},{"__typename":"Topic","slug":"programming"}],"isLimitedState":false,"isPublished":true,"allowResponses":true,"latestPublishedVersion":"a30f44744dcd","visibility":"PUBLIC","postResponses":{"__typename":"PostResponses","count":72},"responseDistribution":"NOT_DISTRIBUTED","clapCount":34213,"title":"Plans for the Next Iteration of Vue.js","isSeries":false,"sequence":null,"uniqueSlug":"plans-for-the-next-iteration-of-vue-js-777ffea6fabf","socialTitle":"","socialDek":"","canonicalUrl":"","metaDescription":"","latestPublishedAt":1560239499776,"readingTime":8.787735849056604,"previewContent":{"__typename":"PreviewContent","subtitle":"Last week at Vue.js London I gave a brief sneak peek of what’s coming in the next major version of Vue. This post provides an in-depth…"},"previewImage":{"__ref":"ImageMetadata:1*vFC8tDUGLlXIiqT7ymf3xg.png"},"isShortform":false,"seoTitle":"","firstPublishedAt":1538315566095,"updatedAt":1682111911740,"shortformType":"SHORTFORM_TYPE_LINK","seoDescription":"","viewerEdge":{"__ref":"PostViewerEdge:postId:777ffea6fabf-viewerId:lo_242c7e455e98"},"isSuspended":false,"license":"ALL_RIGHTS_RESERVED","tags":[{"__ref":"Tag:javascript"},{"__ref":"Tag:front-end-development"},{"__ref":"Tag:vuejs"},{"__ref":"Tag:vue"}],"isFeaturedInPublishedPublication":false,"isNewsletter":false,"statusForCollection":"APPROVED","pendingCollection":null,"detectedLanguage":"en","wordCount":2183,"layerCake":3,"responsesLocked":false}}</script><script>window.__MIDDLEWARE_STATE__={"session":{"xsrf":""},"cache":{"cacheStatus":"HIT"}}</script><script src="https://cdn-client.medium.com/lite/static/js/manifest.4b5fe151.js"></script><script src="https://cdn-client.medium.com/lite/static/js/9865.1496d74a.js"></script><script src="https://cdn-client.medium.com/lite/static/js/main.af7becea.js"></script><script src="https://cdn-client.medium.com/lite/static/js/instrumentation.5bef8967.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/reporting.ff22a7a5.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9120.5df29668.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5049.d1ead72d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4505.6dfaf853.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6618.db187378.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9380.fb176dee.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2707.dc8dbee4.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/9977.933c1c9a.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8599.68bc318b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3045.1cc3d8cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6349.3329b100.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2648.26563adf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8393.a4ecfb83.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6428.7d30b23c.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6199.6da73f3b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5642.7d9f7f3d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6546.67eb283b.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6834.8aa8d357.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/4492.0c3e1a1d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2571.6814b962.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/839.1c286b32.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/6128.f8800a13.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2135.2e8dc177.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/7975.60bcefe8.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/144.86429b48.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/5240.6281357f.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8819.c627c2bf.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8204.d0637ed0.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostPage.MainContent.a27c27dc.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/8414.0d800846.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/3974.8d3e0217.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/2527.18a8996d.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/PostResponsesContent.e1e580cb.chunk.js"></script> <script src="https://cdn-client.medium.com/lite/static/js/responses.editor.e89462cb.chunk.js"></script><script>window.main();</script><script>(function(){function c(){var b=a.contentDocument||a.contentWindow.document;if(b){var d=b.createElement('script');d.innerHTML="window.__CF$cv$params={r:'91380b55ebf181f8',t:'MTczOTgxOTA3OC4wMDAwMDA='};var a=document.createElement('script');a.nonce='';a.src='/cdn-cgi/challenge-platform/scripts/jsd/main.js';document.getElementsByTagName('head')[0].appendChild(a);";b.getElementsByTagName('head')[0].appendChild(d)}}if(document.body){var a=document.createElement('iframe');a.height=1;a.width=1;a.style.position='absolute';a.style.top=0;a.style.left=0;a.style.border='none';a.style.visibility='hidden';document.body.appendChild(a);if('loading'!==document.readyState)c();else if(window.addEventListener)document.addEventListener('DOMContentLoaded',c);else{var e=document.onreadystatechange||function(){};document.onreadystatechange=function(b){e(b);'loading'!==document.readyState&&(document.onreadystatechange=e,c())}}}})();</script></body></html>