【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类先编译后运行，主要为了性能

参考于 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 = 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
  • 开源地址 https://github.com/doddgu/alpaca/
  • 项目进度 https://github.com/doddgu/alpaca/projects/1
• Gitee(不定时同步)
  • 开源地址 https://gitee.com/doddgu/alpaca