vue2升级vue3问题bug解决分析整理
作者：buddha
这篇文章主要介绍了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问题解决的资料请关注脚本之家其它相关文章！