XIAOJUSURVEY的Vue3升级之路

前言

XIAOJUSURVEY是由公司内部沉淀、重新设计并开源的系统，因此也继承了内部使用的Vue2框架。但是随着vue2逐渐停止维护，vue3的生态建设已经日趋完善与稳定，升级Vue3版本已势在必行。

文内项目Github：XIAOJUSURVEY

作者：nilnoop

背景

经梳理，工程中需要升级的配套库包含vue、vue-router、vuex、Element-UI、VueDraggable、wangeditor、Vue-Cli等，涉及到的工作量巨大。为了控制变更范围、保持功能稳定，先做必须的升级，比如虽然Vite提供了内置的TS支持可开箱即用，本次升级仍保留原来的JS写法，后续再逐步改造成TS。

接下来就逐个看一下升级过程。

vue

不知不觉间vue已经走过了第十个年头，在前端技术日新月异的今天，已经是一个不再年轻的框架。但是vue3仍然为社区带来了新的活力。重构的响应式系统、更好的代码组织方式（composition api）、更优秀的diff性能、解耦的视图层渲染，甚至更优雅的代码组织方式也让更多人了解并熟知了mongo repo的代码组织范式，并引起了社区的极大关注。

由于Vue3的一大亮点是升级了Composition API，支持更好的逻辑复用，更有利于大型项目的维护。但是考虑到升级顺利，原组件仍保持vue2的Option API写法。但是部分breaking change还是需要手动升级的，包括但不限于：

1、ModelValue

v-model的props名称变成了ModelValue，这一点在子组件接收props的时候需要修改的props名字。当然也可以使用 defineModel 宏来简写。但是要注意版本需要为3.4+

// vue2中v-model的语法相当于下面的结果
<ChildComponent :value="pageTitle" @input="pageTitle = $event" />

// vue3中v-model的语法相当于下面的结果
<ChildComponent
  :modelValue="pageTitle"
  @update:modelValue="pageTitle = $event"
/>

2、插槽slot

// vue2写法-使用插槽
<div slot="body"></div>
// vue3写法-使用插槽
<template #body></template>

注意如果在vue组件中使用了渲染函数，那么插槽的渲染方式也发生了变化，改成了函数调用。

// vue2写法
this.$scopedSlots.header

// vue3写法
this.$slots.header()

3、后缀

资源import的方式，必须要显示指定.vue后缀