脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue3升级问题

vue3升级常见问题详细汇总

 更新时间：2023年03月07日 09:42:49   作者：野生切图仔  
随着vue3 的发布和越来越多项目的使用,之前使用 vue2 的项目也不能拉下,vue2 升级 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--> }

可以利用 全局匹配修改

选择正则匹配

::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升级问题内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

相关文章

  • 前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现方法

    token是一个用户信息的表示,在登录中将会从后端拿到token,然后用户才可以进行往后的一系列操作,这篇文章主要给大家介绍了关于前端登录退出处理Token问题(获取、缓存、失效处理)及代码实现的相关资料,需要的朋友可以参考下
    2024-01-01
  • Vue 将后台传过来的带html字段的字符串转换为 HTML

    Vue 将后台传过来的带html字段的字符串转换为 HTML

    这篇文章主要介绍了Vue 将后台传过来的带html字段的字符串转换为 HTML ,需要的朋友可以参考下
    2018-03-03
  • vue下载文件以及文件重命名方式

    vue下载文件以及文件重命名方式

    这篇文章主要介绍了vue下载文件以及文件重命名方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2022-10-10
  • element table 表格控件实现单选功能

    element table 表格控件实现单选功能

    本文主要介绍了element table 表格控件实现单选功能，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
    2022-07-07
  • Vue 父子组件、组件间通信

    Vue 父子组件、组件间通信

    本篇文章主要介绍了Vue 父子组件、组件间通信示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
    2017-03-03
  • 7个适用于Vue 3的高颜值UI组件库

    7个适用于Vue 3的高颜值UI组件库

    这篇文章主要给大家分享介绍了7个适用于Vue 3的高颜值UI组件库,合理利用,又或者学习借鉴都是不错的选择,文中通过图文介绍的非常详细,需要的朋友可以参考下
    2022-12-12
  • 解决vue前后端端口不一致的问题

    解决vue前后端端口不一致的问题

    这篇文章主要介绍了解决vue前后端端口不一致的问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
    2021-07-07
  • vue超时计算的组件实例代码

    vue超时计算的组件实例代码

    这篇文章主要介绍了vue超时计算的组件实例代码,需要的朋友可以参考下
    2018-07-07
  • Vue3快速实现文件上传OSS的方法详解

    Vue3快速实现文件上传OSS的方法详解

    这篇文章给大家介绍了Vue3快速实现文件上传OSS的方法,上传文件可以说是经典的需求了,在后台管理项目中随处可见,一般是由前端进行文件上传,然后再由后端去处理,本文旨在实现上传功能,不考虑额外的功能（如文件尺寸限制）,感兴趣的朋友可以参考下
    2024-01-01
  • vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    vue2.0中vue-cli实现全选、单选计算总价格的实例代码

    本篇文章主要介绍了vue2.0中vue-cli实现全选、单选计算总价格的实例代码，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
    2017-07-07

最新评论