隨著 TienChin 項(xiàng)目視頻的錄制，松哥終于也要靜下心來(lái)，認(rèn)真捋一捋 Vue3 中的各種新特性了，然后再和小伙伴們進(jìn)行分享，其實(shí) Vue3 中還是帶來(lái)了很多新鮮的玩意，今天我們就不卷 Java 了，來(lái)卷卷前端。

　　以下內(nèi)容是一個(gè) Java 猿對(duì) Vue3 的理解，主要是應(yīng)用層面上，如果有專業(yè)的前端小伙伴，請(qǐng)輕拍。

　　1. script 寫(xiě)法

　　進(jìn)入到 Vue3 時(shí)代，最明顯的感受就是在一個(gè) .vue 文件中，script 標(biāo)簽的寫(xiě)法大變樣了。以前在 Vue2 中，我們都是這樣寫(xiě)的：

　　不過(guò)到了 Vue3 里邊，這個(gè)寫(xiě)法變了，變成下面這樣了：

　　先從大的方面來(lái)看，細(xì)節(jié)實(shí)現(xiàn)咱們后面再細(xì)聊。

　　大的方面，就是在這個(gè) export default 中，以后就只有兩個(gè)元素了，name 和 setup，我們以前的各種方法定義、生命周期函數(shù)、計(jì)算屬性等等，都寫(xiě)在 setup 中，并且需要在 setup 中返回，setup 中返回了什么，上面的 template 中就能用什么。

　　這種寫(xiě)法稍微有點(diǎn)費(fèi)事，所以還有一種簡(jiǎn)化的寫(xiě)法，像下面這樣：

　　這種寫(xiě)法就是直接在 script 標(biāo)簽中加入 setup，然后在 script 標(biāo)簽中該怎么定義就怎么定義，也不用 return 了。這個(gè)場(chǎng)景，又有點(diǎn) jQuery 的感覺(jué)了。

　　上面這個(gè)實(shí)現(xiàn)里有幾個(gè)細(xì)節(jié)，我們?cè)賮?lái)詳細(xì)說(shuō)說(shuō)。

　　2. 生命周期

　　首先就是生命周期函數(shù)的寫(xiě)法。

　　以前 Vue2 里的寫(xiě)法有一個(gè)專業(yè)名詞叫做 options API，現(xiàn)在在 Vue3 里也有一個(gè)專業(yè)名詞叫做 composition API。在 Vue3 中，這些對(duì)應(yīng)的生命周期函數(shù)都要先從 vue 中導(dǎo)出，然后調(diào)用并傳入一個(gè)回調(diào)函數(shù)，像我們上一小節(jié)那樣寫(xiě)。

　　下圖這張表格展示了 options API 和 composition API 的一一對(duì)應(yīng)關(guān)系：

　　想用哪個(gè)生命周期函數(shù)，就從 vue 中導(dǎo)出這個(gè)函數(shù)，然后傳入回一個(gè)回調(diào)就可以使用了。例如第一小節(jié)中松哥給大家舉的 onMounted 的用法。

　　3. 計(jì)算屬性

　　除了生命周期函數(shù)，計(jì)算屬性、watch 監(jiān)聽(tīng)等等，用法也和生命周期函數(shù)類似，需要先從 vue 中導(dǎo)出，導(dǎo)出之后，也是傳入一個(gè)回調(diào)函數(shù)就可以使用了。上文有例子，我就不再啰嗦了。

　　像 watch 的監(jiān)控，寫(xiě)法如下：

　　導(dǎo)入 watch 之后，然后直接使用即可。

　　更多關(guān)于“java培訓(xùn)”的問(wèn)題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學(xué)，課程大綱緊跟企業(yè)需求，更科學(xué)更嚴(yán)謹(jǐn)，每年培養(yǎng)泛IT人才近2萬(wàn)人。不論你是零基礎(chǔ)還是想提升，都可以找到適合的班型，千鋒教育隨時(shí)歡迎你來(lái)試聽(tīng)。