vue2升级vue3问题bug解决分析整理
一.依旧使用vue2的写法所遇到的问题
1.Property 'codeArr' does not exist on type 'CreateComponentPublicInstance<{}, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, {}, {}, false, {}, {}, OptionTypesType<{}, {}, {}, {}, {}, {}>, ... 5 more ..., {}>'.
56 | computed: {
57 | isBtnDis() {
> 58 | return this.codeArr.length === 6;
| ^^^^^^^
59 | }
60 | },解决方法
所有在computed里面的计算属性的返回值都要注明返回类型
改成:
computed: {
isBtnDis(): boolean {
return this.codeArr.length === 6;
}
},2.mapGetters写法错误
解决方法:
改成:
computed: {
...mapGetters({ isalive: "alive" })
},或
computed: {
...mapGetters("alive")
},二.使用vue3的setup写法所遇到的问题
1.调用computed里的值名字后面要加上.value
比如:
setup(){
const isBtnDis = computed(()=>{
return return this.codeArr.length === 6;
})
console.log(isBtnDis.value)
}三.vue3与vue2不兼容的地方
1.Vue3的路由重定向的正确写法
{
path: "/:pathMatch(.*)*",
redirect: "/home"
}或
{
path: "/:pathMatch(.*)",
redirect: "/home"
}或
{
path: "/:catchAll(.*)",
redirect: "/home"
}2.配置postcss-pxtorem,设计图尺寸是375px,postcss-pxtorem升级之前的写法是rootValue:37.5,但是经过转换后的尺寸却特别的小,页面看起来就像是平板或者pc上的,经过测试发现改成rootValue:16或者viewportWidth: 375会和升级之前的rootValue:37.5几乎没有差别
const { defineConfig } = require("@vue/cli-service");
const autoprefixer = require("autoprefixer");
const pxtorem = require("postcss-pxtorem");
module.exports = defineConfig({
publicPath: "./",
outputDir: "dist",
transpileDependencies: true,
lintOnSave: false,
productionSourceMap: false,
css: {
loaderOptions: {
postcss: {
postcssOptions: {
plugins: [
autoprefixer({
overrideBrowserslist: ["Android >= 4.0", "iOS >= 7"]
}),
pxtorem({
viewportWidth: 375,
propList: ["*"]
})
]
}
}
}
}
});以上就是vue2升级vue3遇到的问题解决分析整理的详细内容,更多关于vue2升级vue3问题解决的资料请关注脚本之家其它相关文章!
相关文章
Element ui table表格内容超出隐藏显示省略号问题
这篇文章主要介绍了Element ui table表格内容超出隐藏显示省略号问题,具有很好的参考价值,希望对大家有所帮助,2023-11-11
vue+elementUi中的table实现跨页多选功能(示例详解)
最近在开发工业品超市的后台系统,遇到一个需求,就是实现在一个table表格中多选数据,在网上查了好多,有些方法真的是无语,下面通过本文给大家分享vue+elementUi中的table实现跨页多选功能,感兴趣的朋友跟随小编一起看看吧2024-05-05
Vue3造轮子之Typescript配置highlight过程
这篇文章主要介绍了Vue3造轮子之Typescript配置highlight过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2024-07-07
atom-design(Vue.js移动端组件库)手势组件使用教程
这篇文章主要介绍了atom-design(Vue.js移动端组件库)手势组件使用教程,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下2019-05-05
axios解决高并发的方法:axios.all()与axios.spread()的操作
这篇文章主要介绍了axios解决高并发的方法:axios.all()与axios.spread()的操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧2020-11-11


最新评论