温馨提示×

温馨提示×

您好,登录后才能下订单哦!

密码登录×
登录注册×
其他方式登录
点击 登录注册 即表示同意《亿速云用户服务条款》

vue3升级常见问题有哪些

发布时间:2023-03-07 11:09:39 来源:亿速云 阅读:115 作者:iii 栏目:开发技术

这篇文章主要介绍了vue3升级常见问题有哪些的相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇vue3升级常见问题有哪些文章都会有所收获,下面我们一起来看看吧。

    Ⅰ、前言

    虽然 vue3 是没有删除 vue2 的 选项式 API , 但是我们升级vue3 还是需要修改很多问题的

    Ⅱ、解决兼容问题

    1、路由的创建方式

    vue2 写法

    const router = new VueRouter({
      	routes: []
    });
    export default router;

    ②改为 vue3 写法

    import { createRouter, createWebHistory } from 'vue-router'
    const routerHistory = createWebHistory()
    const router = createRouter({
        history: routerHistory,
        routes: []
    })
    export default router

    2、路由的方法变化

    this.$router.push({path: '/bbb', query: {username: "abc"}});

    修改为

    import { useRouter }  from  'vue-router'
    const  router = useRouter()
    router.push({ path:'/bbb', params:{ username: 'posva'} });

    3、升级 vuex 到 4.x

    vue2vue3
    vue2要用vuex 3.x 版本vue3要用vuex 4.x 版本

    4、作用域  插槽语法修改

    2.6 以下

    <template  slot-scope="row">
    	<span>{{row.name}}</span>
    </template>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <template  slot="header">
    	<span>666</span>
    </template>

    2.6 以上及 3.x 则需要改为

    <template v-slot:default="row">
    	<span>{{row.name}}</span>
    </template>
    或 
    <template #default="row">
    	<span>{{row.name}}</span>
    </template>
    ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
    <template v-slot:header>
    	<span>666</span>
    </template>

    5、具名插槽不能重复

    错误写法

    <Comp>
    	<span>999</span>
    	<template #default>
    		<span>666</span>
    	</template>
    	<template #default>
    		<span>777</span>
    	</template>
    </Comp>

    正确写法

    <Comp>
    	<template #default>
    		<span>999</span>
    		<span>666</span>
    		<span>777</span>
    	</template>
    </Comp>

    6、根挂载的变化

    import Vue from 'vue'
    import App from './App.vue'
    
    import router from './router' //路由
    import store from './store'  //vuex
    
    new Vue({
      router,
      store,
      render: h => h(App)
    }).$mount('#app')

    修改为

    import { createApp } from 'vue'
    import App from './App.vue'
    
    import router from './router' //路由
    import store from './store'  //vuex
    
    createApp(App)
    .use(store)
    .use(router)
    .mount('#app')

    7、模板 v-for ,必须在模板上挂载 key

    错误写法 

    <template v-for="item in list">
    	<div :key='item.key'>{{item.name}}</div>
    </template>

    正确写法 

    <template v-for="item in list" :key='item.key'>
    	<div>{{item.name}}</div>
    </template>

    8、递归组件 写法变化

    如一个简化的tree例子

    <template>
    	<Tree :list ="list">
    </template>
    <script >
    import Tree from './Tree.vue'
    export default {
    data() {
        return {
    	 list:[
    	 		{name:'aaa' , children:[{ name:'ccc' }] } , 
    	 		{name:'bbb'}
    	 ]
       }
    }
    </script>

    vue2 需要导入本身

    <template>
        <div v-for='item in list' :key='item.name'>
        	<span>{{item.name}}</span>	
    		<Tree :list ="list.children" v-if='list.children'>
        </div>
    </template>
    <script>
    import Tree from './Tree.vue'
    export default {
      components: { Tree },
      }
    };
    </script>

    vue3根据组件名

    <template>
        <div v-for='item in list' :key='item.name'>
        	<span>{{item.name}}</span>	
    		<Tree :list ="list.children" v-if='list.children'>
        </div>
    </template>
    <script>
    export default {
      name:'Tree'
    }
    </script>

    9、深层样式写法变化

    如 :

    ::v-deep .input__text{<!--{C}%3C!%2D%2D%20%2D%2D%3E--> }

    修改为:

    :deep(.input__text){<!--{C}%3C!%2D%2D%20%2D%2D%3E--> }

    可以利用 全局匹配修改

    vue3升级常见问题有哪些

    选择正则匹配

    ::v-deep\s(.*)\s
    
    :deep($1)

    10、生命周期钩子函数 命名修改

    beforeDestroy() =>    beforeUnmount()
    destroyed()     =>    unmounted()
    
    删除 created() 生命周期

    11、数据总线 eventBus 变化

    vue3 中已经移除了 eventBus 的一些方法 , 但是通过一点点代码就能自己实现一个

    查看详情 => vue3 eventBus

    12、异步组件

    components:{
        asyncCom1 :() => import('../components/test-com')
    }

    vue3 则要 修改为

    import { defineAsyncComponent } from 'vue'
    const asyncCom2  = defineAsyncComponent(() => import('组件路径'))

    13、ui 组件库

    ui 组件库的 ,则需要参照 ui 组件库的文档进行修改

    关于“vue3升级常见问题有哪些”这篇文章的内容就介绍到这里,感谢各位的阅读!相信大家对“vue3升级常见问题有哪些”知识都有一定的了解,大家如果还想学习更多知识,欢迎关注亿速云行业资讯频道。

    向AI问一下细节

    免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:is@yisu.com进行举报,并提供相关证据,一经查实,将立刻删除涉嫌侵权内容。

    AI