圖片來自網絡
作者:河畔一角 前端未來
轉發鏈接:
https://mp.weixin.qq.com/s/z2mNeQknUfili6I-MWplsg
作為前端開發者,這幾天想必大家都看到了Vue3.0的beta版新聞了,是的,尤大大在4.17號微博曬出了Vue3.0的beta鏈接,不少FEer開始興奮,不過也有不少其它聲音:『我學不動了』、『這不就是React』、『啥時候出正式版』;
就在昨晚關於Vue3.0-beta尤大佬也現場直播聊聊他有哪些新特性,咱們一起回顧回顧:
《聊聊昨晚尤雨溪現場針對Vue3.0 Beta版本新特性知識點彙總》
Vue3.0-beta鏈接:
https://github.com/vuejs/vue-next#status-beta
那麼首先,我們先簡單看一下Vue發佈版本的過程:Alpha - Beta - RC - 正式
所以,從截圖來看,還會經歷RC階段才會有正式版本能用,大家不要過於著急,目前尤大正在全力開發配套基礎功能,比如腳手架、vue-router、以及生態插件等;
Vue3.0設計目標
更小全局 API 和內置組件 / 功能支持 tree-shaking常駐的代碼尺寸控制在 10kb gzipped 上下更快基於 Proxy 的變動偵測,性能整體優於 getter / setterVirtual DOM 重構編譯器架構重構,更多的編譯時優化加強API設計一致性加強TypeScript支持提高自身可維護性代碼採用 monorepo 結構,內部分層更清晰TypeScript 使得外部貢獻者更有信心做改動開放更多底層功能對於我們開發者來講,最關心的還是它的用法,實際上這塊變化非常大。雖然目前是beta版本,但我們依然可以嚐鮮,在本地創建Vue項目,並做一做Demo;
一、創建項目
<code> cnpm install -g /cli vue create vue3
.0
/<code>注:這一步實際上用的依然是2.x的版本
二、升級2.6到3.0beta版本
<code> 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 APIref APIwatch API變化computed API變化生命週期鉤子變化(參考上面)TypeScript和JSX支持(暫時忽略)reactive
作用:創建響應式對象,非包裝對象,可以認為是模板中的狀態。
它本身一種Hooks能力,用過React Hook的,實際上就等同於useState();大家估計很好奇,為什麼叫reactive? 讓人莫名有一種你再抄襲React的感覺!
接下來,上硬菜:
<code>
<
div
id
="app"
><
h1
>{{title.name}}h1
>div
><
div
> // 此處可並列多個div,不再要求一個根元素了div
>template
><
script
>
import
{ reactive }from
'vue'
export
default
{name
:'App'
, setup(){const
title = reactive({name
:'歡迎學習Vue3.0'
})return
{ title } } }script
><
style
>
#app
{text-align
: center;color
:#2c3e50
;margin-top
:60px
; }style
>/<code>頁面效果圖:
Ref
作用:創建一個包裝式對象,含有一個響應式屬性value。
它和reactive的差別,就是前者沒有包裝屬性value
接下來,上硬菜:
<code>
<
template
><
div
id
="app"
><
h1
>{{title.name}}h1
><
div
>{{user}}div
>div
template
><
script
>
import
{ reactive,ref }from
'vue'
export
default
{name
:'App'
, setup(){const
title = reactive({name
:'歡迎學習Vue3.0'
})const
user = ref('河畔一角'
); user.value ='河畔老師'
return
{ title ,user } } }script
><
style
>
#app
{text-align
: center;color
:#2c3e50
;margin-top
:60px
; }style
>/<code>效果圖如下:
事件處理
實際上這個地方有一些小誤區,Vue3.0依然可以繼續使用2.x的語法,data、methods、mounted依然可以使用,我們這兒主要針對Composition API做講解,可以翻譯成新增的組合API.
如果不用methods,那事件處理該怎麼調用方法?
上硬菜:
<code>
<
template
><
div
id
"app"
><
h1
>{{title.name}}h1
><
div
>{{user}}div
><
button
@click
="updateUser"
>修改名稱button
>div
>template
><
script
>
import
from
'vue'
export
default
{name
:'App'
, setup(){const
title = reactive({name
:'歡迎學習Vue3.0'
})const
user = ref('河畔一角'
);const
updateUser =()
=>{ user.value ='河畔老師'
}return
{ title , user, updateUser } } }script
><
style
>
#app
{text-align
: center;color
#2c3e50
;margin-top
:60px
; }style
>/<code>效果圖:
onMounted/computed
作用:新週期函數和新計算函數
上硬菜:
<code>
<
template
><
div
id
="app"
><
h1
>{{title.name}}h1
><
div
>{{user}}div
><
button
@click
="updateUser"
>修改名稱button
><
div
>當前count:{{computedCount}}div
><
button
@click
="increment"
>修改countbutton
>div
>template
><
script
>
import
{ reactive,ref,onMounted,computed }from
'vue'
export
default
{name
:'App'
, setup(){const
title = reactive({name
:'歡迎學習Vue3.0'
})const
user = ref('河畔一角'
);const
updateUser =()
=>{ user.value ='河畔老師'
} onMounted(()
=>{console
.log('init mounted...'
) })const
count = ref(0
const
increment =()
=>{ count.value++ }const
computedCount=computed(()
=>count.value*10
)return
{ title , user, updateUser,count,increment,computedCount } } }script
><
style
>
#app
{text-align
: center;color
:#2c3e50
;margin-top
:60px
; }style
>/<code>效果圖:
經過以上幾個API講解,相信大家開始越來越激動了,語法新穎,簡潔凝鍊,但大家需要有一個過渡期,剛開始肯定會很陌生;
實際上用法遠不止這些,包括父子傳遞、支持jsx語法等,我們這兒不做一一介紹了,大家可以自己通過第三方資料整理,瞭解更多Vue3.0的語法;
給大家提供幾個官網的API文檔:
https://composition-api.vuejs.org/#summary
https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api/
尤大直播回放地址:
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文檔會有詳細介紹。
作者:河畔一角 前端未來
轉發鏈接:
https://mp.weixin.qq.com/s/z2mNeQknUfili6I-MWplsg