uniapp从 vue2 项目迁移到 vue3流程
以下是必须为迁移到 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已修改为unmountedbeforeDestroy已修改为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。
如果文章对您有帮助，还请您点赞支持
感谢您的阅读，欢迎您在评论区留言指正分享