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问题解决的资料请关注脚本之家其它相关文章!
相关文章
Vue.js中this如何取到data和method里的属性详解
methods属性是一个对象,通常我们会在这个对象中定义很多的方法,下面这篇文章主要给大家介绍了关于Vue.js中this如何取到data和method里的属性,需要的朋友可以参考下2022-12-12浅谈vue项目优化之页面的按需加载(vue+webpack)
本篇文章主要介绍了vue项目优化之页面的按需加载(vue+webpack),小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧2017-12-12
最新评论