数据推广公司图片优化软件
以下是必须为迁移到 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 2import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)const store = new Vuex.Store({state: {}})export default store// After - Vue 3import { 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 modelValuemodelValue: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。
如果文章对您有帮助，还请您点赞支持
感谢您的阅读，欢迎您在评论区留言指正分享