vue3 中 tsx 實踐前因後果why ts

。。。。在大型專案的長期維護與迭代中，ts所有的特性都能很好的滿足這個場景

why tsx (jsx 與 模板語法異同)模板語言特性模板語法更方便簡單易上手 v-if,v-forvue3 本身對模板編譯做了很大的最佳化，透過標記 block 和方法快取的方式，diff 的最佳化,示例可以檢視 連結vue3 模板,正是因為使用模板語言，其標籤的固定性可以容易識別出程式碼塊與vue變數才能進行標記和方法快取，減少物件建立這是提高diff演算法效率的基礎，比jsx中變數識別程式碼塊更簡單。編譯最佳化還有其他場景例如巢狀節點等等這些建議觀看尤大關於效能提升的影片。劣勢：模板語言中 ts 型別支援力度不夠，當然官方提供外掛也能解決這個問題，實現的原理就是把模板變成 ts，再把 ts 反饋給模板jsx語法特性為什麼使用jsx這個疑問不僅僅是我的疑問，也是 react-hook 開源作者的疑問官方的表述 ui 和邏輯的一致性白話版翻譯 js 本身提供更靈活的使用方式在 jsx 中不僅僅可以 v-show，還可以新增更多的 style,color 等等理解一致性 map 遍歷比 v-for 在 js 本身的邏輯裡面，顯然map更容易理解一點點劣勢：在 react 中使用 jsx 很容易會出現父元件渲染，子元件重複渲染的問題，當元件層級很深的時候，資料變化時 render 函式重複觸發對瀏覽器的效能就是極大的消耗，官方也提供了例如 useMemo,useCallback 這樣的hook實現手動快取技術選型為jsx原因在語法檢查，函數語言程式設計，以及單元測試的角度來說jsx是存在相對優勢的本身靈活性在大型專案中確實很常見也很好用，原子化與複用在ant-design-vue 這樣的專案中體現很好一致性，前端現在生態最為人吐槽的一點就是框架方言化，一個框架一個方言，這不是一件很好的事情。為什麼 vue3 推出和 react-hook 比較相似的 api,開源作者也注意到了前端生態共建的這樣的一個場景，對於團隊個人發展也是好事，如果從 vue3 的 tsx 轉換成 react-hook 認知成本是很低的，反之亦然vue3 正式開始核心模組響應式模型編譯模型渲染模型重點變化效能提升，編譯渲染效能最佳化,proxy 可以劫持先知道是屬性就直接去屬性中獲取tree-shaking 支援，vue 包模組按需引入composition api， 組合 api 提高複用fragment 不用寫根節點了，這個 angular 和 react 很早就有了更好的 ts 支援 ，大型專案訴求越來越多render api（沒懂）關鍵 api - setup為什麼使用新的 option 就是為了承接 vue2 中的寫法可以不使用 setup 也能把 vue3 實現，這個做法在 react 提出 hook 的時候,官方的說明也是如此不建議把之前 class 全部改下成 hook,在專案已經成熟的情況下。不管是 hook 還是 setup 只要使用了新的寫法確實在大型專案中能減少很多程式碼,實現了方法公用，減少了生命週期中的操作react比較程式碼量和方法使用簡易程度vue3-setup setup在vue3 是第一位置，在這個鉤子函式中不能使用 data 等等其他option 這就是故意為之，在其內部不能使用 this 的原因也正是如此，用this.去獲取data屬性時data還沒有執行。 如果需要使用掛載方法可以透過下面的例項講解中的方法，這樣就可以實現在setup中獲取this,使用this.&message({})watchEffectwatchEffect 是沒有中間狀態的，可以監聽所有屬性變化,立即執行，vue2中複雜的寫法在現在的api中可以更少的程式碼量實現watchwatch 具有中間狀態，最終狀態沒變不會觸發回撥，具有惰性，可以接受多個值，可以獲取 oldvalue，但是接受引數必須具有響應性或者是是個執行函式ref響應式物件建議使用reactive區分場景使用,在組合 api 中 return 返回中不合適使用，下面會詳細介紹原因toRefs當從合成函式返回響應式物件時，toRefs 非常有用,這樣雖然可以變回響應式，但是在多個組合 api 組合使用時也失去了意義，後面詳見核心問題為什麼使用組合api，怎麼使用組合api最大的問題 why use composition api方法複用在大型專案中可以共享程式碼邏輯，減少物件建立程式碼塊分佈問題：當代碼行數很多時,資料，屬性，計算屬性，watch都分佈在不同區域，明明是操作同一個資料卻要來回切換，開發體驗不好在vue2中 mixins,extend,原型掛載，元件註冊的方式都是實現公用方法，但是變數命名和開發體驗不好，跟之前的reactive一個道理，雖然也有解決方法例如命名規則，v-slot等等終究不是很方便（實現方式就不舉例了不是這次重點）

使用規範

業務元件中將相關聯的組合api合併，在新建檔案匯出方法，或者當前在元件函式外部宣告

全域性和模組共用方法抽離在composables目錄下面

vue3中實戰示例獲取 domv-if 指令v-for 指令v-show 指令classNames動態 class事件繫結函式元件插槽的使用與渲染在 setup 中獲取 this