Vue3 Transition 踩坑記
前言
系列首發(fā)于公眾號『前端進階圈』 ，若不想錯過更多精彩內(nèi)容，請“星標”一下，敬請關注公眾號最新消息。
Vue3 Transition 踩坑記
背景
我本來想嘗試新版本的特性，結果踩了個大坑。在這里分享一下我的經(jīng)驗，希望能讓大家少走彎路
上代碼
上述代碼錯誤信息：
有趣的是，官方文檔 中并沒有提到
Transition子元素不能包含注釋。
踩坑歷程
第一步：看到
Cannot read properties of undefined (reading 'loc')，習慣性(Uncaught (in promise) ReferenceError: xxxxx is not defined) 地在本地Transition.vue頁面中尋找loc變量，結果沒有找到。然后我在全局查找，還是沒有找到loc變量。(其實這一步是多余的，因為錯誤信息[plugin:vite:vue] Cannot read properties of undefined (reading 'loc')，并不是由于本地文件沒有loc變量導致的，而是因為源碼內(nèi)部插件報的錯誤。)第二步：查看源碼
warnTransitionChildren.ts。編譯前
編譯后
查看源碼得知，
Transition組件內(nèi)必須包含一個元素或只有一個根元素的組件且不能是注釋, 才能通過運行時編譯。第三步：嘗試修改。在
Transition組件里包含一個元素，發(fā)現(xiàn)它通過了。
第四步: 看單測源碼
warnTransitionChildren.spec.ts，對于喜歡深入了解的同學可以看一下。
總結
Transition組件子元素不能包含注釋，這會導致無法通過運行時編譯，導致組件不能正確渲染。(我踩了半小時的坑，不要跟我一樣)模板編譯中，
Transition子元素不允許多個組件或元素，否則編譯不通過，根據(jù)單測源碼得知，如果需要多個分支，可以使用v-if, v-if-else來確定具體分支。Transition子元素的組件中可以包含注釋，但是不要包含太多，不然會影響渲染效率。
希望大家能從我的經(jīng)驗中獲得一些收獲，避免重復踩坑。
特殊字符描述：
問題標注
Q:(question)答案標注
R:(result)注意事項標準：
A:(attention matters)詳情描述標注：
D:(detail info)總結標注：
S:(summary)分析標注：
Ana:(analysis)提示標注：
T:(tips)
往期推薦：
前端面試實錄HTML篇
前端面試實錄CSS篇
JS 如何判斷一個元素是否在可視區(qū)域內(nèi)？
Vue2、3 生命周期及作用？
排序算法：QuickSort
箭頭函數(shù)與普通函數(shù)的區(qū)別？
這是你理解的CSS選擇器權重嗎？
JS 中 call, apply, bind 概念、用法、區(qū)別及實現(xiàn)？
常用位運算方法？
Vue數(shù)據(jù)監(jiān)聽Object.definedProperty()方法的實現(xiàn)
為什么 0.1+ 0.2 != 0.3，如何讓其相等？
聊聊對 this 的理解？
JavaScript 為什么要進行變量提升，它導致了什么問題？
最后：
歡迎關注 『前端進階圈』 公眾號 ，一起探索學習前端技術…
公眾號回復 加群 或 掃碼, 即可加入前端交流學習群，一起快樂摸魚和學習…
公眾號回復 加好友，即可添加為好友
