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.調(diào)用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,設(shè)計圖尺寸是375px,postcss-pxtorem升級之前的寫法是rootValue:37.5,但是經(jīng)過轉(zhuǎn)換后的尺寸卻特別的小,頁面看起來就像是平板或者pc上的,經(jīng)過測試發(fā)現(xiàn)改成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遇到的問題解決分析整理的詳細(xì)內(nèi)容,更多關(guān)于vue2升級vue3問題解決的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
Element ui table表格內(nèi)容超出隱藏顯示省略號問題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號問題,具有很好的參考價值,希望對大家有所幫助,2023-11-11vue+elementUi中的table實現(xiàn)跨頁多選功能(示例詳解)
最近在開發(fā)工業(yè)品超市的后臺系統(tǒng),遇到一個需求,就是實現(xiàn)在一個table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無語,下面通過本文給大家分享vue+elementUi中的table實現(xiàn)跨頁多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問題淺析
總的來說這并不是一道難題,那為什么要拿出這道題介紹?拿出這道題真正想要傳達(dá)的是解題的思路,以及不斷優(yōu)化探尋最優(yōu)解的過程。希望通過這道題能給你帶來一種解題優(yōu)化的思路,Axios是一個開源的可以用在瀏覽器端和Node JS的異步通信框架,主要作用就是實現(xiàn)AJAX異步通信2023-01-01Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問題,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2023-03-03Vue3造輪子之Typescript配置highlight過程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-07-07atom-design(Vue.js移動端組件庫)手勢組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動端組件庫)手勢組件使用教程,非常不錯,具有一定的參考借鑒價值,需要的朋友可以參考下2019-05-05axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
這篇文章主要介紹了axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-11-11