Vue2升级Vue3实践

一、升级前准备

在正式升级前，可以提前处理一些已兼容的小修改以及被移除的API。

deep 样式穿透

历史所有的 ＞＞＞ || /deep/ || ::v-deep 样式穿透，更改为 :deep() 。

在 Vue 2.7 中，运行项目会提示 deep 相关问题，虽然项目还能正常启动，但会在控制台报警告信息。

// 历史写法
/deep/ .el-card__body {
  padding: 20px 20px 0;
}
// 新版写法
:deep(.el-card__body){
  padding: 20px 20px 0;
}

inline-template 属性

移除 inline-template 标识，在 Vue 3 中，inline-tempalte 属性将会被移除，不再支持该用法了，如果必须使用可用

2. main.js

创建并挂载根实例

创建实例，new Vue --> createApp()

挂载方式，$mount() --> mount()

添加全局属性和方法，Vue.prototype --> app.config.globalProperties

// Vue 2
import Vue from 'vue'
import 'element-ui/lib/theme-chalk/index.css'
import ElementUI from 'element-ui'
import App from './App'
import router from './router'
import Vuex from 'vuex'
import store from './store'
import '@/assets/styles/common.scss'
import '@/assets/styles/main.scss'
import '@/assets/fonts/iconfont.css'
import './lib/filters.js'
import Format from './lib/format.js'
Vue.prototype.$format = Format
Vue.config.productionTip = false
Vue.use(ElementUI)
Vue.use(Vuex)
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')
// Vue 3
import { createApp } from 'vue'
import App from './App.vue'
import 'element-plus/dist/index.css'
import ElementPlus from 'element-plus'
import locale from 'element-plus/lib/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
import router from './router'
import store from './store'
import '@/assets/styles/common.scss'
import '@/assets/styles/main.scss'
import '@/assets/fonts/iconfont.css'
import Format from './lib/format.js'
const app = createApp(App)
app.config.globalProperties.$format = Format
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}
app.use(ElementPlus, { locale } ).use(router).use(store)
app.mount('#app')

四、语法和API

以下只是简单例举了几个常用的变化，关于语法和API的详细变更可以参见Vue官方文档：Vue2迁移

v-model

排查没有修饰符的 v-model，分别将 prop 和 event 命名更改为 modelValue 和 update:modelValue 。

v-bind 的 .sync 修饰符和组件的 model 选项已移除，更改为 v-model:value 。