实习技术总结（四）Vue2 -> Vue3 项目语法升级

最近参与的项目正在进行升级，将使用 Vue 3 + Element Plus 代替 Vue2 + Element UI 进行开发，以下为迁移注意事项：

必要的处理

• 检查项目是否有废弃的具名/作用域的旧语法 废弃slot语法
• 升级vue-router。同 <router-view> 一起使用 <transition> 和 <keep-alive> 就要求使用新的作用域插槽写法。基于作用域插槽的语法
• <transition> 类名升级(运行时无警告的特性)，全局搜索更新。transition更新
• 全局挂载API的更新createApp。createApp
• 行为冲突。(渲染函数api、函数式组件 异步组件的改变)渲染函数
• 处理命令行、浏览器的警告。常见兼容性以及是否有警告的总结
• api非兼容的迁移方案

其他注意细节

• a标签避免写无用的href，比如href="#"，会触发路由跳转
• .sync废弃
• Vue.extend 已废弃，需要的话使用createApp创建实例并挂载。
• 异步组件加载要引入defineAsyncComponent（注：路由相关的懒加载(异步)不需要引入defineAsyncComponent. 有的话与vue2.x的方式一样，无需变动。）
• render 函数扁平化，不支持directive指令方式。
• $set 废弃，响应方式改变，避免再使用。
• Vue3 中的 data 必须是函数，不能是对象，否则会报错。
• 生命周期写法稍有差异，如取消 beforeCreate 和 created，将 mounted 改为 onMounted。
• setup 里不可以使用 this。

---

以下为项目中用到的 Element Plus：

Cascader 级联选择器

属性

参数	说明	类型	可选值	默认值
v-model	选中项绑定值	—	—	—
options	可选项数据源，键名可通过 Props 属性配置	array	—	—
disabled	是否禁用	boolean	—	false
clearable	是否支持清空选项	boolean	—	false
placeholder	输入框未选中时默认占位文本	string	—	Select

事件

事件名称	说明	回调参数
change	当选中节点变化时触发	选中节点的值value

应用场景

例："职业"和”阶段“是级联选择，根据”职业“的不同，”阶段”字段会显示或隐藏。

• 如果选择“学生”，二级字段“阶段”字段显示，可使用级联选择器。
• 如果选择“教育行业从业者”、“其他行业从业者”或“其他”，则没有二级字段。

Select 选择器

属性

参数	说明	类型	可选值	默认值
v-model	绑定值	boolean / string / number	—	—
multiple	是否多选	boolean	—	false
disabled	是否禁用	boolean	—	false
clearable	是否可以清空选项	boolean	—	false

事件

事件名称	说明	回调参数
change	选中值发生变化时触发	目前的选中值
visible-change	下拉框出现/隐藏时触发	出现则为 true，隐藏则为 false
remove-tag	多选模式下移除tag时触发	移除的tag值
clear	可清空的单选模式下用户点击清空按钮时触发	—

应用场景

多个选项在选择框点击时下拉选择，可单选、多选，只适用于一级选择

遇到问题

问题1：Element Plus 某些控件直接设置样式不生效

• 原因：设置过全局样式，局部样式直接设置无效。
• 解决：组件使用scoped在使用使用 :v-deep穿透

:v-deep(.el-input) { 
 width: 60px;
}

问题2：Element Plus 某些控件穿透修改原样式不生效

• 原因：Element Plus 有一些控件的面板 DOM 是在app范围之外的，所以scoped+deep穿透无效。
• 解决：给 cascader 设置属性:append-to-body="false"，给 select 设置属性:popper-append-to-body="false"

相关内容

• Element Plus 官网
• unplugin-element-plus - Element Plus 按需加载样式插件。