# 是否可以用 Vue 3.0 ### 現有的Vue 2.* 不推薦，坐等Vue 3.0出遷移工具吧，手動改的話工作量還是不小的 ### 新專案 考慮下團隊內對Vue + TS + VS Code的熟練程度。過程中你會遇到一些問題，要麼靠耐心解決，要麼靠經驗。 * 某度，某歌搜尋Vue 3.0大多數是體驗、介紹、互撕，很少有實戰專案 * 官方文件還是Vue 2.*的風格，一些最新出的Vue 3的配套是沒有的，比如Volar * 關於TS的文件較少，目前以JS為主，想體驗Vue 3.0 + TS的魅力需要靠經驗和毅力，東拼西湊各種體驗類文章以便快速上手 * Vite雖香，入坑需謹慎，debugger標記不準確，可能跟 map 有關，會給除錯帶來一些困擾，暫時沒時間解決 * 全家桶沒有完全跟上，雖然功能上可以了，但是DevTools中沒有vuex模組，官方回答需要vuex自持，要等等 * 一些第三方框架，package還不支援Vue 3.0 ### 結論能用嗎 能，只是用起來沒有那麼順滑。畢竟正式版釋出也沒多久，生態需要慢慢跟上。但這並不妨礙你使用，而且很多改進的亮點也促使我克服這些小障礙。 # Vue 3.0的魅力 ### 開發效率提升 搭配Vite使用，顯著提升專案啟動速度。告別npm run serve後，上個廁所不拉肚子回來還要繼續等的尷尬。 ##### Vite是什麼 如Webpack，先編譯後執行  Vite藉助於ES Module，先執行，根據請求實時編譯+快取 PS:僅是Dev Server，生產的Build還是迴歸Webpack類先編譯後執行，主要為了效能  > 參考於 https://vitejs.dev/guide/why.html ##### Vite是Vue 3.0獨享嗎 不是，Reactive、Angular JS也都可以。當然Vue 2也可以，需要藉助第三方package underfin/vite-plugin-vue2 ### 更容易上手 看一段相對簡單的程式碼來對比下 ```ts // Vue 2.0 export default { name: 'index', data () { return { name: '小王', age: 18 } }, watch:{ age (val) { this.name = age > 30 ? '老王' : '小王' } }, methods: {} } // Vue 3.0 export default { name: 'index', setup () { const name = ref('小王') const age = ref(18) const person = reactive({ name, age }) watch(age, () => { name.value = age > 30 ? '老王' : '小王' //這裡必須要有.value }) return person } } ``` 在一個setup裡就可以完成引數定義、watch、computed、methods等 那這樣看起來只是寫法上不用承受態度心裡負擔，但實際上也增加了 reactive、ref 等新的知識點 ### 超甜語法糖 ##### setup函式 ```ts ``` 的確寫法更簡單了，但是這個ref和reactive我還是搞不明白 ##### ref sugar 這是個備受爭議的語法糖，已經圍攻到光明頂了，有興趣可以百度下ref sugar ```ts ``` PS：defineComponent還是要寫的，只是setup被提到了top level ### 更人性化的改進 ##### template不再要求包一個父元素了 ```html ``` ##### teleport解決跨元件操作的一系列問題 它不是幫你傳遞引數，而是允許你埋點，然後把程式碼段傳遞過去 ```html