vue2 升级 vue3

主要步骤：

API和方法

1、new Vue() 弃用

vue2是通过new vue() 来创建实例， vue3 使用 createApp 调用返回应用程序

vue2

import Vue from "vue";
Vue.use()

vue3

import { createApp } from 'vue'
const app = createApp({})
app.use()

2、this.$set 弃用

vue2

this.$set(item, 'isDefault', false)

vue3

import { ref,  reactive } from "vue";
item = reactive({
    isDefault: false
})

模板指令

3、 组件上v-bind.sync 替换为 v-model

vue2

<el-dialog title="新增" :visible.sync="open" width="500px" v-el-dialog-drag v-el-dialog-drag-width>

vue3

<el-dialog title="新增" v-model="open" width="500px" draggable>

4、v-el-dialog-drag v-el-dialog-drag-width自定义指令去掉，换成draggable

如上，

插槽

5、使用的每一个slot都需要一个 template 包裹，

且 slot=“名称” 修改为 v-slot:名称，简写可以#default="scope", #default="{row}"

vue2

<el-table-column label="状态" align="center" prop="status">
    <template slot-scope="scope">
        <span>{{}}</span>
    </template>
</el-table-column>

vue3

<el-table-column label="状态" align="center" prop="status">
    <template #default={row}>
        <span>{{}}</span>
    </template>
</el-table-column>

组件

6、组件事件现在需要在 emits 选项中声明

vue2

<p>{{ text }}</p>
<el-button @click="$emit('success')">确定</el-button>

vue3

props: ['text'],
emits: ['success']

样式

7、在vue2中使用/deep/来做样式穿透，在vue3中过期了，换成使用:deep()

vue2

<style scoped>
    .a /deep/ .b {
        /* ... */
    }
</style>

vue3

<style scoped>
    .a :deep(.b) {
        /* ... */
    }
</style>

注意 工具包 升级

• 状态管理工具 —— Vuex 升级 成 Pinia

系统里已经引入，具体用法可以去官网学习一下，中文文档 pinia.web3doc.top/

• UI框架 —— ElementUI 升级成 Element Plus

官网 element-plus.org/

常见变化：

1、图标库使用方式icon 从 class 模式转换成了组件模式

vue2

<i class="el-icon-plus"></i>

vue3

<el-icon><Plus/></el-icon>

2、 size="mini" 弃用了

vue2

<el-button type="primary" icon="el-icon-plus" size="mini">新增</el-button>

vue3

<el-button type="primary" icon="Plus">新增 </el-button>

3、 组件的插槽slot使用变化了

vue2

<el-input v-model="value">
    <template slot="append">{{  }}</template>
</el-input>

vue3

<el-input v-model="value">
    <template #append>{{  }}</template>
</el-input>

4、element ui 升级 element plus，ElMessage 需要引入。

vue2

this.msgSuccess(res.message)

vue3

import { ElMessage } from 'element-plus'                
ElMessage.success(res.message)

也可以全局配置了$message, 可以直接用this.$message.success(res.message)，error,warning同样。

5、 el-button中，type=text被弃用了，表格内操作可 使用 link。

vue2

<el-button type="text" icon="el-icon-edit">修改</el-button>

vue3

<el-button link icon="Edit">修改</el-button>

6、 日期选择器设置日期将格式化的格式写为 format="YYYY-MM-DD" value-format="YYYY-MM-DD"。

vue2

format="yyyy-MM-dd"

vue3

format="YYYY-MM-DD"

升级报错清单

升级报错清单

1 、问题：vite require is not defined

原因：vite项目require语法兼容问题。

解决方案：require 改 import.meta.glob

3、 问题： /deep/过期报错问题

原因：在vue2中使用/deep/来做样式穿透，在vue3中过期了。

解决方案：换成使用:deep()

4 、问题：v-slot 插槽问题，

原因：vue3中slot有变更。

解决方案：使用的每一个slot都需要一个 template 包裹，且 slot=“名称” 修改为 v-slot:名称，简写可以#default="scope",#default="{row}"

5、 问题：Failed to parse source for import analysis because the content contains invalid JS syntax. If you are using JSX, make sure to name the file with the .jsx or .tsx extension.

原因：确保将文件XXX命名为.jsx或.tsx扩展名。

解决方案：由于有个文件在render函数里面用了jsx报错，所以将该文件命名为.jsx扩展名。

6 、问题：Cannot read properties of undefined (reading ‘deep‘)

原因：vue3全局自定义指令问题  

解决方案：v-el-dialog-drag v-el-dialog-drag-width自定义指令去掉，换成drag gable。

7、 问题：弹框出不来。:visible.sync问题

原因：:visible.sync 问题。在vue3中v-model得到了加强，自定义组件也可以使用了v-model。而不用去指定model或者使用.sync参数了。

解决方案：将 :visible.sync  改为  v-model

8 问题：

Vue3警告：[Vue warn]: Extraneous non-emits event listeners (ok) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. If the listener is intended to be a component custom event listener only, declare it using the “emits” option.

原因：在Vue3中组件通信中（子传父）警告

解决方案：声明下自定义事件名称即可  emits: [‘xxx’],

9 、问题：msgSuccess等事件报错

原因：element ui 升级 element plus，ElMessage 需要引入。

解决方案：this.msgSuccess(res.message) 换

import { ElMessage } from 'element-plus'                

ElMessage.success(res.message)

----更新---

全局配置了$message, 可以直接用this.$message.success(res.message)，error,warning同样。

10、 问题：Invalid prop: validation failed . Expected one of {"", "default",, "small", "large" ], got value "mini" } failed for prop size 

原因： size="mini" 弃用了。

解决方案：把 size="mini" 删掉，或换成 size="small" 。

11 、问题：element-plus icon问题

原因：element-ui 升级

解决方案：

修改button 中icon引入，如，

  新增

12、 问题：type.text  is about to be deprecated in version 3.0.0, please use type.link instead

原因：el-button中，type=text被弃用了，

解决方案：表格内操作可 使用 link。 修改

13 、问题： can no longer be used directly inside or .

原因：keep-alive写法变了

解决方案：用 slot props 代替，改写成:

  

    

  

14 、问题：this.$set报错。

原因：升级后 this.$set不再使用

解决方案：直接赋值，或使用reactive、 ref

15、 总线中 new Vue()报错。

原因：vue3里面没有new Vue()了 ，vue3改了，允许多实例，vue2只能单实例。

解决方案：使用 tiny-emmitter 进行组件通信

16、 问题：el-table 多选问题。

原因：this.$refs.multipleTable.selection 不生效 undefined。

解决方案： 换成 this.$refs.multipleTable. getSelectionRows() 获取选中的内容。

17 、问题：路由传参问题。

原因：原 this.router.push({path: `/xxx/{id}`}) 写法有问题，能跳转但取不到参数。

解决方案：换成 this.$router.push({name:'xxx',query: {id:'1'}})

18、 问题：树形选择器 失效。

原因：弃用 vue-treeselect 。

解决方案：直接用 element plus 的 el-tree-select 。

19、问题：分页组件翻页问题。

原因：1 分页组件升级 2 vue3 无需.sync 修饰符

解决方案：分页组件升级后使用时，要将 :page.sync 改成 v-model:page， :limit.sync 改成 v-model:limit

20、 问题：日期选择器设置日期格式化 “yyyy-MM-dd”后会得到的值为“yyyy-02-Mo”，导致日期选择器无法正常使用。

原因：element-ui 升级 element-plus ，使用原element-ui 的 yyyy 和 dd 会出问题，原因不详。

解决方案：用大写，将格式化的格式写为 format="YYYY-MM-DD"      value-format="YYYY-MM-DD"。