[JavaScript知识库]vue2和vue3之间的相互改造【区别】

在做了两个项目，被这两个项目的需求弄伤了

首先一个项目的需求是要将vue2的一个项目功能拷贝到vue3的一个项目内，其实vue3内是兼容vue2的写法的。但还是得撸起袖子干...

而另外一个项目一开始用的是vue3，功能都快开发完了，最后客户来了个需要支持IE8+，都知道尤大大在发布vue3的时候就说了要抛弃IE。没办法，硬着头皮将vue3+element-puls改造成了vue2+element-ui。

总结下两次的改造中vue2和vue3实际开发区别，当然了还有element-plus到element-ui

一、template

vue文件中的template几乎不用修改

1. 常用的修改点首先是两个UI的slot写法不一样。

表格操作列

<!-- element-puls -->
<template #default="scope">
    ...
</template>

<!-- element-ui -->
<template slot-scope="scope">
    ...
</template>

dom上

<!-- element-puls  #插槽名-->
<template #append>
    ...
</template>

<!-- element-ui  slot="插槽名"-->
<template slot="append">
    ...
</template>

2. dialog绑定显示的方式不一致

<!-- element-puls -->
<el-dialog v-model="dialogVisible">
    ...
</el-dialog>

<!-- element-ui -->
<el-dialog :visible.sync="dialogVisible">
    ...
</el-dialog>

二、script

1. 写法不一致【回头写个具体不同之处的文章】

?vue3使用的组合式api，变量、方法的定义，当然还有computed，watch等，看官网

vue2呢就像是一个个的配置项，data、methods、mounted等等，看官网

2. 几处特殊处理

vue2向组件传递的props需要做到双向绑定，可在属性前使用 asnyc 关键字，emit的时候记得加上update:

vue3向组件传递的props需要做到双向绑定，可在属性前使用v-model:，emit的时候也是加上update: