【Alpaca】.Net版开源配置中心 - 技术选型 Vue 3.0
是否可以用 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类先编译后运行,主要为了性能
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 = 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 = 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
- Gitee(不定时同步)
最新文章
- 使用VS Code开发调试.NET Core 多项目
- 《HelloGitHub》之GitHub Bot
- C++ 单元测试 Cpputest
- Android 网络开发免费API接口
- BZOJ 4631 踩气球
- Android开发UI之自定义视图属性
- 转 Jona Dany 一个20年架构师程序员的经验总结
- [Redux] Generating Containers with connect() from React Redux (FooterLink)
- Truncate Delete 用法
- CentOS配代理服务器
- js 高级程序设计(笔记)
- jquery添加节点时能有点击事件
- nio再学习之通道channel
- centos7执行umount提示:device is busy或者target is busy解决方法
- RabbitMQ使用技巧
- SSH免登录及原理
- 案例1:写一个压缩字符串的方法,例如aaaabbcxxx,则输出a4b2c1x3。
- tfs查看最近签入记录及文件
- WPF TextBox属性IsReadOnlyCaretVisible
- 安全模式下卸载windows installer打包的软件(转)