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

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

　　1. script 寫法

　　進入到 Vue3 時代，最明顯的感受就是在一個 .vue 文件中，script 標簽的寫法大變樣了。以前在 Vue2 中，我們都是這樣寫的：

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

　　先從大的方面來看，細節實現咱們后面再細聊。

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

　　這種寫法稍微有點費事，所以還有一種簡化的寫法，像下面這樣：

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

　　上面這個實現里有幾個細節，我們再來詳細說說。

　　2. 生命周期

　　首先就是生命周期函數的寫法。

　　以前 Vue2 里的寫法有一個專業名詞叫做 options API，現在在 Vue3 里也有一個專業名詞叫做 composition API。在 Vue3 中，這些對應的生命周期函數都要先從 vue 中導出，然后調用并傳入一個回調函數，像我們上一小節那樣寫。

　　下圖這張表格展示了 options API 和 composition API 的一一對應關系：

　　想用哪個生命周期函數，就從 vue 中導出這個函數，然后傳入回一個回調就可以使用了。例如第一小節中松哥給大家舉的 onMounted 的用法。

　　3. 計算屬性

　　除了生命周期函數，計算屬性、watch 監聽等等，用法也和生命周期函數類似，需要先從 vue 中導出，導出之后，也是傳入一個回調函數就可以使用了。上文有例子，我就不再啰嗦了。

　　像 watch 的監控，寫法如下：

　　導入 watch 之后，然后直接使用即可。

　　更多關于“java培訓”的問題，歡迎咨詢千鋒教育在線名師。千鋒教育多年辦學，課程大綱緊跟企業需求，更科學更嚴謹，每年培養泛IT人才近2萬人。不論你是零基礎還是想提升，都可以找到適合的班型，千鋒教育隨時歡迎你來試聽。