隨著 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)用層面上，如果有專(zhuān)業(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è)專(zhuān)業(yè)名詞叫做 options API，現(xiàn)在在 Vue3 里也有一個(gè)專(zhuān)業(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ù)類(lèi)似，需要先從 vue 中導(dǎo)出，導(dǎo)出之后，也是傳入一個(gè)回調(diào)函數(shù)就可以使用了。上文有例子，我就不再啰嗦了。

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

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

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