當前位置:吉日网官网 - 傳統美德 - 基於Vue3和TypeScript項目的大量實踐後的思考

基於Vue3和TypeScript項目的大量實踐後的思考

Vue3出來已經有壹段時間了。在團隊裏,我做了很多業務實踐,也有壹些自己的思考。

總的來說,Vue3無論是底層原理還是實際業務發展都取得了很大的進步。

用proxy代替之前的Object.defineProperty的API,性能更好,也解決了vue在處理對象和數組方面的缺陷。在diff算法中,采用了靜態標記的方法,大大提高了Vue的執行效率。

在使用層面,我們從options Api變成了composition Api,慢慢的在實際業務中,我們拋棄了原來數據、方法、computed等孤立的編寫方式。更專註的Compositon Api,專註於相關業務的聚合。

全面支持TypeScript,類型驗證也成為Vue3未來大型項目開發的質量保障,這也是趨勢性的——前端的未來是TypeScript!

compositon Api的精髓體現在代碼中,就是壹個設置函數。在這個設置函數中,返回的數據將用於組件的模板中。這個返回的對象,壹定程度上代表了之前vue2中的數據屬性。

這時候對於大多數初學者來說,可能會有疑惑,那麽我能不能定義壹下options Api的編寫,比如data,computed,watch,methods等等。

這裏我需要明確的是,Vue3完全兼容Vue2的這個options Api的編寫方式,但是從概念上來說,更推薦用setup的方式來編寫我們的組件。

理由如下:Vue3的存在本身就是為了解決Vue2的問題。Vue2的問題是缺乏聚合會導致代碼越來越臃腫!這種設置方式可以將數據、方法邏輯和依賴關系放在壹起,更便於維護。

換句話說,在將來,我們應該盡量不要寫單獨的數據、計算、觀察、方法等。不是Vue3不支持,而是違背了Vue3的理念。

Components屬性,即壹個組件的子組件,Vue2和Vue3差別不大。Vue2的使用方法還是和Vue 3壹樣。

函數方面,ref和reactive都是響應式數據!

在語法層面,兩者是有區別的。ref定義的響應數據需要以[data]的形式進行更改。價值;由反應需求[數據]定義的數據。[屬性]更改數據。

但在應用層面,還是有區別的。壹般來說,我們使用ref來定義單壹常見數據類型的響應。在表單場景中,描述壹個表單的key:value的場景,並使用reactive;在某些場景中,壹個模塊的壹組數據通常以反應的方式定義數據。

那麽,對象壹定要用反應性來定義嗎?其實不是的。什麽都可以做。根據自己的業務場景,具體問題具體分析!Ref強調壹個數據的值的變化,reactive強調定義對象的某個屬性的變化。

周期函數,在Vue3中,單獨使用,使用方式如下:

在Vue2中,其實可以直接通過這個獲得。$store,但在Vue3中,並沒有這樣的概念,用法如下:

在Vue2中,路由由此編程。$router,但在Vue3中,它的用法如下:

merchant.ts

這部分內容,準確的說是TS的內容,但它與Vue3項目的開發息息相關,所以如果真的要使用Vue3,還是要了解TS的使用方法。

不過這部分我不會介紹TS的基本語法,主要是在業務場景下如何組織TS。

在公共接口請求中,我們通常使用TS來定義數據請求、數據請求的req類型和數據請求的res類型。

  • 上一篇:在古代,學童入學的儀式是什麽?
  • 下一篇:外貿仿卡如何推廣!
  • copyright 2024吉日网官网