建设农场网站,两学一做网上答题网站,淘宝api wordpress,网站新媒体建设Ⅰ、前言
虽然 vue3 是没有删除 vue2 的 选项式 API #xff0c; 但是我们升级vue3 还是需要修改很多问题的下面来看看我们升级常见的一些问题 #x1f447; 文章目录Ⅰ、前言Ⅱ、解决兼容问题1、路由的创建方式2、路由的方法变化3、升级 vuex 到 4.x4、作用域 插槽语法修改…Ⅰ、前言
虽然 vue3 是没有删除 vue2 的 选项式 API 但是我们升级vue3 还是需要修改很多问题的下面来看看我们升级常见的一些问题 文章目录Ⅰ、前言Ⅱ、解决兼容问题1、路由的创建方式2、路由的方法变化3、升级 vuex 到 4.x4、作用域 插槽语法修改5、具名插槽不能重复6、根挂载的变化7、模板 v-for 必须在模板上挂载 key 8、递归组件 写法变化9、深层样式写法变化10、生命周期钩子函数 命名修改11、数据总线 eventBus 变化12、异步组件 12、ui 组件库 Ⅱ、解决兼容问题
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 router2、路由的方法变化
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
vue2vue3vue2要用vuex 3.x 版本vue3要用vuex 4.x 版本4、作用域 插槽语法修改
在 2.6 以下
template slot-scoperowspan{{row.name}}/span
/template
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
template slotheaderspan666/span
/template2.6 以上及 3.x 则需要改为
template v-slot:defaultrowspan{{row.name}}/span
/template
或
template #defaultrowspan{{row.name}}/span
/template
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
template v-slot:headerspan666/span
/template5、具名插槽不能重复
错误写法
Compspan999/spantemplate #defaultspan666/span/templatetemplate #defaultspan777/span/template
/Comp正确写法
Comptemplate #defaultspan999/spanspan666/spanspan777/span/template
/Comp6、根挂载的变化
import Vue from vue
import App from ./App.vueimport router from ./router //路由
import store from ./store //vuexnew Vue({router,store,render: h h(App)
}).$mount(#app)修改为
import { createApp } from vue
import App from ./App.vueimport router from ./router //路由
import store from ./store //vuexcreateApp(App)
.use(store)
.use(router)
.mount(#app)7、模板 v-for 必须在模板上挂载 key
错误写法
template v-foritem in listdiv :keyitem.key{{item.name}}/div
/template正确写法
template v-foritem in list :keyitem.keydiv{{item.name}}/div
/template8、递归组件 写法变化
如一个简化的tree例子
templateTree :list list
/template
script
import Tree from ./Tree.vue
export default {
data() {return {list:[{name:aaa , children:[{ name:ccc }] } , {name:bbb}]}
}
/scriptvue2 需要导入本身
templatediv v-foritem in list :keyitem.namespan{{item.name}}/span Tree :list list.children v-iflist.children/div
/template
script
import Tree from ./Tree.vue
export default {components: { Tree },}
};
/scriptvue3根据组件名
templatediv v-foritem in list :keyitem.namespan{{item.name}}/span Tree :list list.children v-iflist.children/div
/template
script
export default {name:Tree
}
/script9、深层样式写法变化
如 :
::v-deep .input__text{ }修改为
:deep(.input__text){ }可以利用 全局匹配修改 选择正则匹配
::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(组件路径))12、ui 组件库
ui 组件库的 ,则需要参照 ui 组件库的文档进行修改 大家升级还要遇到那些问题呢 欢迎大佬们指正
