<kbd id="afajh"><form id="afajh"></form></kbd>
<strong id="afajh"><dl id="afajh"></dl></strong>
    <del id="afajh"><form id="afajh"></form></del>
        1. <th id="afajh"><progress id="afajh"></progress></th>
          <b id="afajh"><abbr id="afajh"></abbr></b>
          <th id="afajh"><progress id="afajh"></progress></th>

          VueConf 2021 搶先看,Evan You 和你聊聊 Vue 的未來!

          共 2109字,需瀏覽 5分鐘

           ·

          2021-04-19 19:46


          近況

          158 萬周活躍用戶(通過 devtools 插件來統(tǒng)計),940 萬的月下載量。

          對比去年

          Devtools:110 萬 -> 158 萬(+43.6%) NPM:620 萬 -> 940 萬(+51.6%)

          Vue 3.0 One Piece

          自那之后,Vue3 逐漸趨于穩(wěn)定,繼續(xù)探索用戶體驗。

          Vue Router 4.0

          已經(jīng)穩(wěn)定。

          Vuex 4.0

          已經(jīng)穩(wěn)定。

          生態(tài)

          慢慢趕上了!

          • Nuxt 3
          • Vuetify
          • Quasar
          • Element Plus
          • Ant Design Vue

          用戶體驗

          持續(xù)探索中:

          • 新的構(gòu)建工具
          • 更棒的語法
          • IDE/TS 支持

          構(gòu)建工具

          Vite,不用說了,今年的明星項目。

          • 和 Vue-CLI 更加相似的體驗
          • 基于 ESM 的 HMR 熱更新
          • ESBuild 提供依賴預(yù)構(gòu)建
          • Rollup 兼容的插件接口
          • 內(nèi)置 SSR 支持
          • 更多更多……

          可以擴(kuò)展閱讀筆者之前寫的淺談 Vite 2.0 原理,依賴預(yù)編譯,插件機(jī)制是如何兼容 Rollup 的?[1]

          Vite 還是 Vue-CLI?

          • 短期內(nèi)會共存
          • 長期會融合:Vite 的速度 + Vue-CLI 的全面度支持

          測試

          • Cypress 新版組件測試
          • @web/test-runner
          • Jest 集成進(jìn)行中

          看了下 @web/test-runner 的簡介,非常全面的測試解決方案:

          VitePress

          基于 Vue3 + Vite 的靜態(tài)站點生成器。

          它的獨特之處在于:

          • 利用 SPA 的開發(fā)體驗來定制用戶主題
          • 在 Markdown 里自由加入動態(tài)組件
          • 自動消除靜態(tài)內(nèi)容的“雙重負(fù)載”

          利用 VitePress 這個平臺,探索未來 SSR/SSG 優(yōu)化(Eat Your Own Dog Food)

          • 更積極的消除靜態(tài)內(nèi)容(甚至是主題組件)
          • 更高效的構(gòu)建
          • 按需構(gòu)建 + 邊緣緩存

          新的開發(fā)體驗

          利用編譯器做更多事情:

          • script setup
          • style CSS 變量注入

          script setup

          • RFC 地址[2]
          • 在單文件組建中提供更符合用戶體驗的 Composition API
          • 提高運行時性能

          style 變量注入

          • RFC 地址[3]
          • 利用 v-bind() 在單文件組件的 style 中注入 JS 狀態(tài)驅(qū)動的 CSS 變量
          • CSS-in-JS 的好處盡享,但避免了它的心智負(fù)擔(dān)。

          更好的 IDE/TS 支持

          多個探索中的項目

          • Vetur
          • VueDX
          • Volar

          獲得了:

          • 類型檢查,語法提示和 SFC templates 的自動重構(gòu)

          接下來:

          • 把這些努力整合成更推薦的鏈路
          • 提供 CLI 工具來利用 TS 校驗 SFC

          計劃:

          • 基于 Volar 的新的官方 VSCode 插件,從 Vetur 和 VueDX 上汲取很多靈感。
          • 通過內(nèi)部設(shè)計來支持其他編輯器,通過 LSP(Language Service Protocol)

          未來

          我們在 Vue3 中放棄了 IE11。

          • RFC[4]
          • 討論[5]

          筆者對這個 RFC 也進(jìn)行了翻譯:

          Vue3 考慮徹底放棄 IE 瀏覽器

          Vue 2.7 會成為堅持留守 IE11 人群的選擇,它會提供更多的 Vue3 特性和 TS 支持。(估計在 2021 第三季度)

          Vue3 的集成構(gòu)建也要來了!

          • 估計在四月末
          • 可單獨配置來兼容 v2

          Vue3 會在 2021 二季度末尾,變成新的默認(rèn)版本!

          • npm 的 lastest tag 會默認(rèn)安裝 Vue3
          • vuejs.org 官網(wǎng)會指向 Vue3 的文檔

          感謝大家!

          參考資料

          [1]

          淺談 Vite 2.0 原理,依賴預(yù)編譯,插件機(jī)制是如何兼容 Rollup 的?: https://juejin.cn/post/6932367804108800007

          [2]

          RFC 地址: https://github.com/vuejs/rfcs/blob/script-setup-2/active-rfcs/0000-script-setup.md

          [3]

          RFC 地址: https://github.com/vuejs/rfcs/blob/style-vars-2/active-rfcs/0000-sfc-style-variables.md

          [4]

          RFC: https://github.com/vuejs/rfcs/blob/ie11/active-rfcs/0000-vue3-ie11-support.md

          [5]

          討論: https://github.com/vuejs/rfcs/discussions/296

          最后



          如果你覺得這篇內(nèi)容對你挺有啟發(fā),我想邀請你幫我三個小忙:

          1. 點個「在看」,讓更多的人也能看到這篇內(nèi)容(喜歡不點在看,都是耍流氓 -_-)

          2. 歡迎加我微信「 sherlocked_93 」拉你進(jìn)技術(shù)群,長期交流學(xué)習(xí)...

          3. 關(guān)注公眾號「前端下午茶」,持續(xù)為你推送精選好文,也可以加我為好友,隨時聊騷。


          點個在看支持我吧,轉(zhuǎn)發(fā)就更好了



          瀏覽 69
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          評論
          圖片
          表情
          推薦
          點贊
          評論
          收藏
          分享

          手機(jī)掃一掃分享

          分享
          舉報
          <kbd id="afajh"><form id="afajh"></form></kbd>
          <strong id="afajh"><dl id="afajh"></dl></strong>
            <del id="afajh"><form id="afajh"></form></del>
                1. <th id="afajh"><progress id="afajh"></progress></th>
                  <b id="afajh"><abbr id="afajh"></abbr></b>
                  <th id="afajh"><progress id="afajh"></progress></th>
                  黄色视屏久久 | 无需播放器的AV | 亚洲日本中文字幕在线观看 | 亚洲高清免费视频 | 粉嫩小泬无遮挡BBBB |