当前位置：首页 > news >正文

uniapp从 vue2 项目迁移到 vue3流程

news 来源：原创 2025/5/17 19:04:21

以下是必须为迁移到 vue3 进行调整的要点，以便 vue2 项目可以在 vue3 上正常运行。

1. 在index.js中创建应用程序实例

// Before - Vue 2
import Vue from 'vue'
import App from './App'
// with no need for vue3
Vue.config.productionTip = false
// vue3 is no longer needed
App.mpType = 'app'
const app = new Vue({
...App
})
app.$mount()

// After - Vue 3
import App from './App'
import { createSSRApp } from 'vue'
export function createApp() {
   const app = createSSRApp(App)
   return {
      app
   }
}

2. 添加全局属性，例如:全局网络请求

// Before - Vue 2
Vue.prototype.$http = () => {};

// After - Vue 3
const app = createApp({});
app.config.globalProperties.$http = () => {};

3. 插件使用，例如:使用vuex的存储

// Before - Vue 2
import store from "./store";
Vue.prototype.$store = store;

// After - Vue 3
import store from "./store";
const app = createApp(App);
app.use(store);

4. 项目根目录必须创建一个index.html文件

复制并粘贴以下内容:

<!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>

只支持使用ES6模块规范，需要将commonJS更改为ES6模块规格

5. 模块导入，例如:

//Before - Vue 2, use commonJS
var utils = require("../../../common/util.js");

//After - Vue 3, only ES6 module is supported
import utils from "../../../common/util.js";

6. 模块导出，例如：

//Before - Vue 2, if dependent, export using commonJS
module.exports.X = X;

//After - Vue 3, can be manually changed to ES6 for export
export default { X };

7. vuex 使用情况

// Before - Vue 2
  import Vue from 'vue'
  import Vuex from 'vuex'
  Vue.use(Vuex)
  const store = new Vuex.Store({
      state: {}
  })
  export default store

// After - Vue 3
  import { createStore } from 'vuex'
  const store = createStore({
      state: {}
  })
  export default store

避免在同一元素上同时使用v-if和v-for

然而，在Vue3中，v-if总是在v-for之前成为有效的。以上内容与 Vue3的预期不符。由于语法上的模糊性，建议避免在同一元素上同时使用两个。
适应生存周期

在Vue3中，组件卸载的生存周期被重命名为
- destroyed已修改为 unmounted
- beforeDestroy已修改为 beforeUnmount
对事件的调整

Vue3 现在提供了一个 emits选项，类似于现有的 props选项。这个选项可以用来定义一个组件可以向其父对象发出的事件。

8. 强烈建议使用 `emits`以记录每个组件发出的所有事件。

这一点尤为重要，因为 .native修饰符已被删除。 emits现在，所有未使用的已声明事件的监听器都将被包含在组件中。 $attrs.默认情况下，侦听器将绑定到组件的根结点。

<template>
  <button @click="onClick">OK</button>
</template>
<script>
export default {
  emits: ['click'],
  methods:{
    onClick(){
      this.$emit('click', 'OK')
    }
  }
}
</script>

与 Vue2相比， Vue3 对v-model的适应性有了很大变化。您可以使用多种v-model。 model，相应的语法也发生了变化。

...当为自定义组件修改modelValue时， Vue3 v-model props和事件的默认名称将被更改。 props.value已更改为 props.modelValue和 event.value已更改为 update:modelValue

export default {
  props: {
    // value:String,
    //Replace value as modelValue
    modelValue:String
  }
}

事件返回:更改之前的 this.$emit('input')到 this.$emit('update:modelValue')，此步骤将在vue3中省略。

9. 自定义组件上的v-model等同于传递modelValue prop并接收抛出的update:modelValue事件:

  <ChildComponent v-model="pageTitle" />
  
  <!-- Abbreviation for the following: -->
  
  <ChildComponent
    :modelValue="pageTitle"
    @update:modelValue="pageTitle = $event"
  />

10. 如果需要更改模型名称，作为组件中模型选项的替代方案，我们现在可以向v-model传递一个参数:

  <ChildComponent v-model:title="pageTitle" />
  
  <!-- Abbreviation for the following: -->
  
  <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />

11. 对时段的改编

Vue3 将不支持使用 slot="xxx"，请使用 v-slot:xxx使用。

<!-- Usage supported by Vue2 -->
<uni-nav-bar>
  <view slot="left" class="city">
    <!-- ... -->
  </view>
</uni-nav-bar>

<!-- Usage supported by Vue3 -->
<uni-nav-bar>
  <template v-slot:left>
    <view class="city">
      <!-- ... -->
    </view>
  </template>
</uni-nav-bar>

从 Vue 3.0+ 开始，过滤器已被删除且不再受支持，建议用方法调用或计算属性替换它们。

如果您想了解更多，请浏览vue官网。文章来源于uniapp官网，文章地址：从vue2迁移到vue3。

如果文章对您有帮助，还请您点赞支持
感谢您的阅读，欢迎您在评论区留言指正分享