uniapp升级Vue3:避坑指南与步骤详解

一、为什么要从Vue2升级到Vue3

Vue3是Vue.js的最新版本,相比Vue2,它带来了许多改进和新特性,比如更小的包体积、更好的性能、更强大的组合式API等。通过升级到Vue3,我们可以享受到这些新特性带来的好处,提升项目的开发效率和用户体验

二、升级步骤

1、Hbuildx安装vue3依赖版本

2、vue2项目依赖库切换vue3

3、替换index.html文件

在项目根文件index.html文件替换为以下内容

xml 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <title></title>
    <!--preload-links-->
    <!--app-context-->
  </head>
  <body>
    <div id="app"><!--app-html--></div>
    <script type="module" src="/main.js"></script>
  </body>
</html>

三、语法替换

vue3新增了一些新语法和使用限制,需升级为vue3新语法、使项目在vue3版本正常运行

创建实例新写法

vue3中使用 createSSRAapp 创建实例 ,在main.js代码如下

javascript 复制代码
import App from './App'
import { createSSRApp } from 'vue'
// 不能修改导出的 createApp 方法名,不能修改从 Vue 中导入的 createSSRApp。
export function createApp() {
  const app = createSSRApp(App)
  return {
    app
  }
}

1、commonJs改为 ES6模块规范

所有require 不可使用,改为import

javascript 复制代码
// 导入
// 之前 - Vue 2, 使用 commonJS
var utils = require("../../../common/util.js");
// 之后 - Vue 3, 只支持 ES6 模块
import utils from "../../../common/util.js";
// 导出
// 之前 - Vue 2, 依赖如使用 commonJS 方式导出
module.exports.X = X; 
// 之后 - Vue 3, 只支持 ES6 模块
export default { X };

2、避免if 和for 一起使用

v-if 优先级更好,因此for 和 v-if 不建议写在一起

3、过滤器改为函数写法

vue3中删除filter ,将所有的filter改为 函数式写法

4、声明周期新写法

在 Vue3 中组件卸载的生命周期被重新命名

  • destroyed 修改为 unmounted
  • beforeDestroy 修改为 beforeUnmount

created 和 onLoad 生命周期执行顺序

created为组件生命周期,onLoad为页面生命周期。因此created执行先于onLoad更合理。

Vue3 在实现时 created 先于 onLoad 执行;Vue2 项目由于历史包袱较重不便修改,仅在使用组合式API时与Vue3对齐。

在编写代码时不应依赖 created 和 onLoad 生命周期执行顺序

相关推荐
gzzeason4 分钟前
Ajax:现代JS发起http通信的代名词
前端·javascript·ajax
iphone10811 分钟前
一次编码,多端运行:HTML5多终端调用
前端·javascript·html·html5
paopaokaka_luck17 分钟前
智能推荐社交分享小程序(websocket即时通讯、协同过滤算法、时间衰减因子模型、热度得分算法)
数据库·vue.js·spring boot·后端·websocket·小程序
老坛00128 分钟前
2025决策延迟的椭圆算子分析:锐减协同工具的谱间隙优化
前端
老坛00129 分钟前
从记录到预测:2025新一代预算工具如何通过AI实现前瞻性资金管理
前端
今禾32 分钟前
" 当Base64遇上Blob,图像转换不再神秘,让你的网页瞬间变身魔法画布! "
前端·数据可视化
华科云商xiao徐36 分钟前
高性能小型爬虫语言与代码示例
前端·爬虫
十盒半价37 分钟前
深入理解 React useEffect:从基础到实战的全攻略
前端·react.js·trae
攀登的牵牛花38 分钟前
Electron+Vue+Python全栈项目打包实战指南
前端·electron·全栈
iccb101338 分钟前
我是如何实现在线客服系统的极致稳定性与安全性的
前端·javascript·后端