是否可以用 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
更容易上手
看一段相對簡單的代碼來對比下
// 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 = https://www.cnblogs.com/doddgu/archive/2021/02/17/age > 30 ?'老王' : '小王' //這里必須要有.value
})
return person
}
}
在一個setup里就可以完成引數定義、watch、computed、methods等
那這樣看起來只是寫法上不用承受態度心里負擔，但實際上也增加了 reactive、ref 等新的知識點
超甜語法糖
setup函式
<script setup lang="ts">
const name = ref('小王')
const age = ref(18)
const person = reactive({
name,
age
})
watch(age, () => {
name.value = https://www.cnblogs.com/doddgu/archive/2021/02/17/age > 30 ?'老王' : '小王'
})
</script>
的確寫法更簡單了，但是這個ref和reactive我還是搞不明白
ref sugar
這是個備受爭議的語法糖，已經圍攻到光明頂了，有興趣可以百度下ref sugar
<script setup lang="ts">
ref: name = '小王'
ref: age = 18
ref: person = { //不需要管reactive和ref的區別了
name,
age
}
watch(age, () => {
name = age > 30 ? '老王' : '小王' //不需要管.value了
})
</script>
PS：defineComponent還是要寫的，只是setup被提到了top level
更人性化的改進
template不再要求包一個父元素了
<!-- Vue 2.0 -->
<template>
<div>
<header></header>
<main></main>
<footer></footer>
</div>
</template>
<!-- Vue 3.0 -->
<template>
<header></header>
<main></main>
<footer></footer>
</template>
teleport解決跨組件操作的一系列問題
它不是幫你傳遞引數，而是允許你埋點，然后把代碼段傳遞過去
<template>
<main>
<h1>Test Teleport</h1>
</main>
<div id="modalPlaceHolder"></div>
</template>
<template>
<button @click="show = true">Show Modal</button>
<teleport to="#modalPlaceHolder">
<div v-if="show">
this is a modal
</div>
</teleport>
<template>
TS的智能感知來了
用過Vue 2 + TS的應該都感受過沒有智能感知的時代，我的確沒辦法說服別人接受它沒有智能感知，雖然我用自己的辦法規避了這個問題，
源于整個底層都是TS寫的，從Vue到Vue Router、Vuex等都支持了泛型， 加上Volar的助力，SFC的Template也可以智能感知了，
總結
- 如果你愿意折騰，并且想提前感受Vue 3 + TS + Vite帶來的不一樣的體驗，你可以在此時就選擇它，
- 如果考慮將Vue 2升級到Vue 3，那建議你再等等
- 如果你不太想折騰，也想提前感受Vue 3 + TS + Vite，你可以關注我的開源配置中心Alpaca，整理下views/store/router檔案夾，你就可以開始專注于寫業務邏輯了
開源地址
- Github
- 開源地址 https://github.com/doddgu/alpaca/
- 專案進度 https://github.com/doddgu/alpaca/projects/1
- Gitee(不定時同步)
- 開源地址 https://gitee.com/doddgu/alpaca
轉載請註明出處，本文鏈接：https://www.uj5u.com/net/260463.html
標籤：.NET技术