vue.js進入了vue3 RC階段，正確姿式霸氣迎接

👑 👑 👑 👑 👑 👑 👑 👑

進入了rc版本階段：

3.0.0-rc.2 (2020-07-20)
3.0.0-rc.1 (2020-07-17)

-- Alpha(α)：預覽版，或者叫內部測試版；通常不向外部發布，會有不少Bug；通常只有測試人員使用。
-- Beta(β)：測試版，或者叫公開測試版；這個階段的版本會一直加入新的功能；在 Alpha版以後推出。
-- RC(Release Candidate)：最終測試版本；可能成爲最終產品的候選版本，若是未出現問題則可發佈成爲正式版本。

多數開源軟件會推出兩個RC版本，最後的 RC2 則成爲正式版本。

Here we go ~~

五步走天下去思考，步步漸進：

• 咱們怎麼入手？
• 有哪些新填API？和vue2不同的地方？
• 快在哪裏，咱們如何得知？
• 大部分基於vue2的第三方組件庫面臨着升級？
• 源碼和周邊知識點哪些值得學習的？

v3.vuejs.org

vue3一些核心,浪裏個浪

更小更快
支持自定義渲染器
靜態ID綁定標誌
響應式修改成基於Proxy的偵測
深度結合typescript
基於treeshaking優化
Cache Handlers(事件偵聽器的緩存)
...

setup()
ref()
watchEffect()
effect() 和 reactive()
...

與 2.x 版本生命週期相對應的組合式 API

beforeCreate → 使用 setup()
created → 使用 setup()
beforeMount → onBeforeMount
mounted → onMounted
beforeUpdate → onBeforeUpdate
updated → onUpdated
beforeDestroy → onBeforeUnmount
destroyed → onUnmounted
errorCaptured → onErrorCaptured

如何使用vue-next-template-explorer玩一玩？
https://vue-next-template-exp...

import { createVNode as _createVNode, toDisplayString as _toDisplayString, openBlock as _openBlock, createBlock as _createBlock } from "vue"
export function render(_ctx, _cache) {
  return (_openBlock(), _createBlock("div", null, [
    _createVNode("span", null, "static"),
    _createVNode("span", null, _toDisplayString(_ctx.msg), 1 /* TEXT */)//1 patchflag flag是編譯時生成的一個配置，只有帶patchflag的Node(節點)會被追蹤，比較text的文字變更
      
  ]))
}
<div>
  <span>static</span>
  <span>
    {{msg}}
  </span> 
</div>

vite簡介
vite 是一個基於 Vue3 單文件組件的非打包開發服務器，它作到了本地快速開發啓動：

一、快速的冷啓動，不須要等待打包操做；
二、即時的熱模塊更新，替換性能和模塊數量的解耦讓更新飛起；
三、真正的按需編譯，再也不等待整個應用編譯完成，這是一個巨大的改變。

特徵就是使用了ES Module,代碼以模塊的形式引入到文件，同時實現了按需加載。
其最大的特色是在瀏覽器端使用 export import 的方式導入和導出模塊，在 script 標籤裏設置 type="module" ，而後使用 ES module。

看看github這個項目：
《前端會客廳第一期代碼》和尤大聊vue3的 提高： https://github.com/shengxinji...

三種體驗vue3的方式

vue-cli

• Vue create vue3-demo-cli
• Vue add vue-next
• 代碼文件 vue3-demo-cli

webpack

• 代碼文件 vue-demo-webpack
• 代碼倉庫

新工具vite

• create-vite-app
• 代碼文件 vue3-demo-vite

並且使用了wrk來測壓：

// vue2 12個進程，300個併發，壓19秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    130.58
Transfer/sec:     17.19MB

// vue3 12個進程，300個併發，壓19秒
➜  ~ wrk -t12 -c300 -d19s http://localhost:3000/
Requests/sec:    288.21
Transfer/sec:     40.69MB

入手vue3,浪裏個浪

兩步得天下：

git clone https://github.com/vuejs/vue-next-webpack-preview.git
cd vue-next-webpack-preview
npm install

https://github.com/vuejs/vue-...

一、檢查vue-cli腳手架版本（vue -V），低版本的要更新（npm install @vue/cli -g）
二、建立項目（vue create vue3test ）
三、進入項目文件夾，更新vue版本（vue add vue-next）
四、運行項目（npm run serve）

Tips: 不是一路順風的，過程當中估計的修修改改，項目才能跑起來，O(∩_∩)O哈哈~_

入手vue3 demo,浪裏個浪

https://vue3.github.io/vue3-N...

幾個vue3 demo，給你強勢入門vue3時代。

• win10 datepanel
• todolist
• art 馬里奧
• 2019-ncov-vue3-version

等等...

其實官網也一些基礎案例：

https://github.com/vuejs/vue-...

vue3源碼集合,浪裏個浪

【這是入口】你要找的 vue 源碼 全宇宙的都在這！
https://github.com/vue3/vue3-...

vue3安裝下來的是打包壓縮：

核心代碼在這裏：

https://github.com/vuejs/vue-...

【這是入口】你要找的 vue 源碼 全宇宙的都在這！
https://github.com/vue3/vue3-...

查看更多,必須浪裏個浪

Vue3+ & Vue-CLI3+ 開發生態圈資訊

該推薦文章列表的最新資訊會第一時間發佈到Github上，歡迎Star：
Find the latest breaking √vue3 & vue-cli 3 News

🚀歡迎Star，後續會不斷更新。
🇨🇳 最後更新日期：2️⃣0️⃣2️⃣0️⃣/0️⃣7️⃣/1️⃣7️⃣

【2020】 ≡≡≡≡≡≡≡≡≡≡≡≡≡≡≡------------------------ 【2021】

除了單獨Vue3資訊，歡迎查看更多vue.js資訊：【【🔥Vue.js資訊📚】目前web前端開發很是火爆的框架；定時更新，歡迎 Star 一下。】