Vue 3 的最新進展

2021-01-21 開源中國

Vue.js 作者尤雨溪近日介紹了 Vue 3 的最新進展。

尤雨溪表示,由於在 Vue 3 上花費的大部分時間都投入到了設計和構建穩定的內核上,不過要讓整個框架處於"ready"狀態,不僅僅是內核的問題,還需要有兼容版本的支持庫 (Vue Router, Vuex, test utils)、工具(CLI、eslint 插件、瀏覽器開發工具擴展、IDE 擴展)和文檔(包括針對新用戶和用於遷移的文檔)。將所有這些內容整合在一起需要協調許多方面的工作。

他希望專注於編寫出好的軟體,而不是趕工期。因此原本計劃2020年上半年發布 Vue 3,但考慮到目前的進度,不得不進行調整。現在的計劃是7月中旬發布 RC 版本,8月初正式發布 3.0 版本。

Vue 3 主要部分的進展

Vue 3 Core

Vue 3 core 已經處於 beta 階段兩個多月,目前已合併所有計劃中的重大更改 RFC,並且在正式發布之前不會進行進一步的重大變更。可以認為 Vue 3 core 已到達穩定狀態,並為 RC 版本做好了準備。

Vue Router

目前存在部分與 vue-router@3.x 相關的路由鉤子(router hook)行為一致性問題,這也是 Vue Router 沒有被標記為 Beta 的原因。不過在非關鍵項目上可以使用新的路由。

Vuex

Vuex 4.0 和 3.x 之間的唯一區別是它與 Vue 3 兼容,目前已準備好和 Vue 3 Core 一起進入 RC 階段。

Vue CLI

Vue CLI 中的 Vue 3 支持目前通過 vue-cli-plugin-vue-next 插件提供。可以先通過腳手架構建一個新項目,然後運行 vue add vue-next 來切換到 Vue 3。Vue 3 進入 RC 階段後會成為項目創建過程中的一個選項。

要注意的是,如果對 webpack 和 IE11 沒有特別要求的支持,也可以使用 Vite 啟動 Vue 3 項目。

JSX Support

當前有兩種針對 Vue 3 的 JSX 轉換實現,其語法略有不同(針對 Vue 的特定功能):

vueComponent/jsxHcySunYang/vue-next-jsx目前正在通過此 issue 收集意見以統一設計,並制定一個官方規範,說明如何在 JSX 中處理 Vue 特性。

其他項目

當然,如果希望嘗試 Vue 3,目前的狀態也已經滿足。因為框架的大多數部分組件都處於 beta 或 alpha 狀態,而內核也已經進行了廣泛的測試,沒有發布 RC 的唯一原因是是瀏覽器開發工具擴展(browser devtool extensions)尚未完成。

相關焦點

  • vue3.0手機聊天室|Vue3+Vant3仿微信界面
    項目簡介Vue3Chat是基於vue3.x+vuex4+vue-router4全家桶技術和vant3.x構建開發的一款mobile仿微信界面聊天實例。實現了發送圖文消息、圖片|視頻預覽、位置查看、紅包|朋友圈等功能。
  • 什麼是VUE?VUE與JS的對比
    我們需要監視屬性和UI元素的變化 3. 我們需要讓所有綁定的對象和元素都能感知到變化1.1.1. vue與js的對比1.1.1.1. js的實現(了解)<!描述(vue的發展史)1.2.2.
  • vue高級進階系列——用typescript玩轉vue和vuex
    本文轉載自【微信公眾號:趣談前端,ID:beautifulFront】經微信公眾號授權轉載,如需轉載與原文作者聯繫用過vue的朋友大概對vuex也不陌生,vuex的官方解釋是專為 Vue.js 應用程式開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態,並以相應的規則保證狀態以一種可預測的方式發生變化。
  • Vue全家桶之什麼是Vuex
    Vue全家桶之Vue2.X和Vue3.X腳手架創建項目的不同方式》或者在我的主頁查看以下項目目錄是Vue cli3.x創建的由於在創建項目時就安裝了Vuex所以目錄中以及創建好了store文件夾下的index.js也可以手動安裝 輸入命令 npm i vuex -s ,然後在項目的根目錄下新增一個store
  • vue-element-admin 4.0.0 正式版發布
    重大改變 基於 vue-cli@3進行構建 調整了項目的目錄結構 mock 文件移至根目錄下 layout 從 views 文件夾下移至 src 下 使用了最新的 eslint-plugin-vue
  • 5分鐘帶你入門vuex(vue狀態管理)
    如果你之前使用過vue.js,你一定知道在vue中各個組件之間傳值的痛苦,在vue中我們可以使用vuex來保存我們需要管理的狀態值,值一旦被修改,所有引用該值的地方就會自動更新,那麼接下來我們就來學習一下vuex是如何修改狀態值的:我們新建一個vue項目(這裡由於我們是講解vuex,所以對於vue項目的創建我們不會講解太詳細);在命令行輸入 vue init
  • Vue+Axios+Vuex+Vux+Vue-Router全家桶搭建前端框架
    開發成本也就高了;二、再來看看React,出身名門FaceBook,社區比較多,而且還可以跨平臺運行,React-Native可以實現一次編寫,安卓、蘋果、web通殺;但是學習也需要一段時間,而且後期維護也不容易;其他的我們就不一一介紹了,最後來看看今天的重頭戲Vue;三、Vue,值得我們驕傲的是,國人發明的,一款漸進式框架,能與現有項目無縫融合,也就是說現有項目可以逐步更新替換使用vue
  • 在vue項目中使用vuex實現狀態管理的案例
    並不需要使用vuex。vuex的使用與否在實際開發中應該視項目情況而定。準備工作:a.在vue項目中安裝vuex: npm install vuex -S。b.了解下vuex的五個屬性。vuex個屬性五個屬性的作用:state:用來存儲vuex的基本數據。
  • 供我們選擇的 Vue 組件庫還有很多!
    說正經的,這意味著後期 ElementUI 可能無人維護,就算 Vue3.0 正式版出來 ,ElementUI 的代碼也將不會被迭代。從下面的圖片中我們也可以看到,最新的一次更新在今年的 5月18日,Github 上 46k+ 的項目,整整三個月沒有迭代更新了。
  • 官方Element Plus for Vue 3.0 Beta 版本今天發布了!
    今天,Element Plus for Vue 3.0 Beta版本正式發布了!對,就是那個被外界傳言不再維護的Element UI!官方團隊幾乎重寫了每一行 代碼,用最Vue 3的方式呈現了最完美的Element,主要有:使用TypeScript開發,提供完整的類型定義文件使用Vue 3.0 Composition API
  • vue-mapvgl v0.0.10 發布,基於 Vue 2.0 和百度地圖的地圖組件
    vue-mapvgl v0.0.10 已經發布,此版本更新內容包括:vue-mapvgl是一套基於Vue 2.0和百度地圖mapvgl的地圖組件。
  • 如何在vue項目中使用sass並設置元素樣式
    GitnpmHBuilder瀏覽器技術vueelementJavaScriptsassCSS3 在創建vue框架項目時,可以使用CSS3定義元素樣式;還可以使用sass動態變量定義元素樣式那麼,如何在vue項目中使用sass?
  • Vue.js深入學習
    vue.jsv-cloak:解決網速慢閃爍問題 ,不會替換掉標籤裡面的內容v-text:會替換掉標籤裡面的內容:原樣輸出v-html:會解析標籤v-bind:綁定屬性的指令,縮寫diectives:{}Vue生命周期一 創建階段:1.在beforeCreate()生命周期函數執行的時候,data 和methods中的數據都還沒有初始化2.在created()中,data 和methods都已經被初始化好了,如果要調用methods中的方法或者操作data中的數據,最早只能在created中操作3.
  • slot vue 具名專題及常見問題 - CSDN
    vue的slot1、什麼是slotslot是插槽,插即是可以插入,槽就是坑,即是可以再代碼中插入如果子組件模板中不包含插口,那麼父組件的內容將會被丟棄。當子組件模板中有一個麼有屬性的插槽時,父組件傳入的整個內容片段,將插入到插槽所在的dom的位置,並替換掉插槽標籤本身。
  • 如何創建vue項目並使用element框架中的el-select
    1、在電腦硬碟上,找到一個位置,新建一個文件夾wmn;滑鼠右鍵選擇Git Bash Here,並在Git窗口輸入cnpm install --global vue-cli命令:cnpm install --global vue-cli
  • a標籤 href vue專題及常見問題 - CSDN
    vue.js 實現a標籤href裡添加參數原始碼列表可以正常顯示,但是連接沒有實現對items.orderNo的值轉化,最中解決方法
  • 如何寫一個vue組件專題及常見問題 - CSDN
    如何使用vue寫一個組件庫新建vue項目使用vue-cli初始化一個項目:vue init webpack VueComponentcd VueComponentnpm installnpm run dev以上就新建好了一個vue項目項目目錄首先,定義好目錄,經過觀察大多數的組件庫,基本是這樣的目錄
  • ref vue 獲取文本專題及常見問題 - CSDN
    ref的官網介紹https://cn.vuejs.org/v2/api/#ref需求在普通的js操作中,一般都是直接操作dom元素,但是對於Vue.js框架來說,一般是不允許直接操作dom元素的。那麼其實Vue.js框架提供了ref獲取dom元素,以及組件引用。
  • vue 具名插槽詳解專題及常見問題 - CSDN
    插槽含義:就是引入子組件後,在插入子組件元素中添加信息或者標籤,使得子組件的指定位置插入信息或者標籤插槽有三種:默認插槽、具名插槽、作用域插槽,由於vue2.6.0後對插槽進行修改,但是兼容2.6.0前的版本,博文中只說明2.6.0後的插槽,vue3.0後面會去除2.60前的版本兼容  一、默認插槽<
  • Vue.js 教程:構建一個特斯拉汽車餘電計算器
    作為本教程的起點,請克隆這個 Github 存儲庫:https://github.com/petereijgermans11/workshop-reactjs-vuejs然後轉至 vuejs-app 目錄。