作為前端開發者,這幾天想必大家都看到了Vue3.0的beta版新聞了,是的,尤大大在4.17號微博曬出了Vue3.0的beta鏈接,不少FEer開始興奮,不過也有不少其它聲音:『我學不動了』、『這不就是React』、『啥時候出正式版』;
Vue3.0-beta鏈接:https://github.com/vuejs/vue-next#status-beta
![Vue 3.0 語法快速入門](http://p2.ttnews.xyz/loading.gif)
那麼首先,我們先簡單看一下Vue發佈版本的過程:Alpha - Beta - RC - 正式
![Vue 3.0 語法快速入門](http://p2.ttnews.xyz/loading.gif)
所以,從截圖來看,還會經歷RC階段才會有正式版本能用,大家不要過於著急,目前尤大正在全力開發配套基礎功能,比如腳手架、vue-router、以及生態插件等;
Vue3.0設計目標
- 更小
- 全局 API 和內置組件 / 功能支持 tree-shaking
- 常駐的代碼尺寸控制在 10kb gzipped 上下
- 更快
- 基於 Proxy 的變動偵測,性能整體優於 getter / setter
- Virtual DOM 重構
- 編譯器架構重構,更多的編譯時優化
- 加強API設計一致性
- 加強TypeScript支持
- 提高自身可維護性
- 代碼採用 monorepo 結構,內部分層更清晰
- TypeScript 使得外部貢獻者更有信心做改動
- 開放更多底層功能
對於我們開發者來講,最關心的還是它的語法,實際上這塊變化非常大。雖然目前是beta版本,但我們依然可以嚐鮮,在本地創建Vue項目,並做一做Demo;
一、創建項目
<code>// 先升級vue-cli到4.x版本
cnpm install -g @vue/cli
// 通過腳手架創建項目,一路回車
vue create vue3.0
/<code>
注:這一步實際上用的依然是2.x的版本
二、升級2.6到3.0beta版本
<code>// 安裝完vue/cli以後,可以使用vue add添加插件
// 目前3.0對應的是vue-next項目
vue add vue-next/<code>
安裝完vue-next以後,我們就發現本地項目已經升級到了3.0. 打開main.js如圖:
左側目錄結構沒有太大變化,main的語法卻大不一樣了;
前面我們提到Vue3.0更小,因為它支持Tree-Shaking,可以把每一個用到的API都抽取出來,通過上圖我們發現,可以只解構出一個createApp函數,相比2.0簡化了很多。
三、LifeCycle介紹(Hooks)
Vue3.0中,生命週期方法已經發生了很大變化,接下來我們對比一下:
四、Composition API介紹
實際上,起初定義的是Vue-Function-API,後經過社區意見收集,更名為Vue-Composition-API.
接下來,我們介紹幾個變化大的Composition API:
- reactive API
- ref API
- watch API變化
- computed API變化
- 生命週期鉤子變化(參考上面)
- TypeScript和JSX支持(暫時忽略)
reactive
作用:創建響應式對象,非包裝對象,類似於在2.0的data中聲明變量。
它本身一種Hooks能力,用過React Hook的,實際上就等同於useState();大家估計很好奇,為什麼叫reactive? 讓人莫名有一種你再抄襲React的感覺!
接下來,上硬菜:
<code>// 打開 App.vue,刪除多餘代碼
<template>
{{title.name}}
// 此處可並列多個div,不再要求一個根元素了
/<template>
/<code>
頁面效果圖:
Ref
作用:創建一個包裝式對象,含有一個響應式屬性value
它和reactive的差別,就是前者沒有包裝屬性value
接下來,上硬菜:
<code><template>
{{title.name}}
{{user}}
/<template>
/<code>
效果圖如下:
事件處理
既然不用methods,那事件處理該怎麼調用方法?
上硬菜:
<code><template>
{{title.name}}
{{user}}
<button>修改名稱/<button>
/<template>
/<code>
效果圖:
onMounted/computed
作用:週期函數和計算函數
上硬菜:
<code><template>
{{title.name}}
{{user}}
<button>修改名稱/<button>
當前count:{{computedCount}}
<button>修改count/<button>
/<template>
/<code>
效果圖:
經過以上幾個API講解,相信大家開始越來越激動了,語法新穎,簡潔凝鍊,但大家需要有一個過渡期,剛開始肯定會很陌生;
實際上用法遠不止這些,包括父子傳遞、支持jsx語法等,我們這兒不做一一介紹了,大家可以自已通過第三方資料整理,瞭解更多Vue3.0的語法;
給大家提供幾個官網的API文檔:
https://composition-api.vuejs.org/#summary
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
尤大4.21直播回放地址:
https://live.bilibili.com/record/R14x411c7rW
上述源碼已經上傳Github: https://github.com/JackySoft/vue3.0-demo
溫馨提示:目前Vue3.0是會兼容大部分2.x的語法,實際上主要的變化,在上面的Vue3.0設計目標裡面已經列出,我們主要的學習成本可能就在Composition API這塊,新增了很多組合API,它本身不依賴this指針,方便我們對邏輯做抽取封裝。
不知道大家是否能看懂這個圖!我上面提到的API文檔會有詳細介紹。
閱讀更多 前端程序員啊 的文章