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

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

　　1. script 寫法

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

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

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

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

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

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

　　上面這個(gè)實(shí)現(xiàn)里有幾個(gè)細(xì)節(jié)，我們再來詳細(xì)說說。

　　2. 生命周期

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

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

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

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

　　3. 計(jì)算屬性

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

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

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

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