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里面的計(jì)算屬性的返回值都要注明返回類型
改成:
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è)計(jì)圖尺寸是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)文章
這篇文章主要給大家介紹了關(guān)于vue路由教程之靜態(tài)路由的相關(guān)資料，文中通過示例代碼介紹的非常詳細(xì)，對大家學(xué)習(xí)或者使用vue具有一定的參考學(xué)習(xí)價值，需要的朋友們下面來一起學(xué)習(xí)學(xué)習(xí)吧2019-09-09
本文主要介紹了使用pyscript在網(wǎng)頁中撰寫Python程式的方法，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2022-05-05
Vue3實(shí)現(xiàn)AI流式打字機(jī)的完整解決方案
本文介紹了基于MessageChannel實(shí)現(xiàn)Vue AI流式對話的方案,通過SSE流式解析、時間切片、任務(wù)隊(duì)列等技術(shù),實(shí)現(xiàn)了非阻塞UI渲染和完美處理分包粘包問題,同時提供了一套可復(fù)用的Hook,并進(jìn)行了詳細(xì)的對比分析,需要的朋友可以參考下2026-04-04
這篇文章主要介紹了vue.js實(shí)例對象+組件樹的相關(guān)資料,需要的朋友可以參考下2017-10-10
這篇文章主要介紹了vue中向data添加新屬性的三種方式小結(jié)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
解決vue中菜單再次點(diǎn)擊內(nèi)容不刷新問題
當(dāng)elementUI中菜單打開后,再次點(diǎn)擊不會刷新的問題,導(dǎo)致菜單再次點(diǎn)擊不刷新的根本原因是頁面打開后,再次打開相同的頁面是不會刷新的,這應(yīng)該是框架的機(jī)制就是如此,小編整理了兩個比較不錯的解決方法,需要的朋友可以參考下2023-08-08
vue實(shí)現(xiàn)兩級select聯(lián)動+input賦值+select選項(xiàng)清空
這篇文章主要介紹了vue實(shí)現(xiàn)兩級select聯(lián)動+input賦值+select選項(xiàng)清空過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解
這篇文章主要為大家介紹了一鍵將Word文檔轉(zhuǎn)成Vue組件mammoth的應(yīng)用詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
在本篇內(nèi)容里小編給大家整理了關(guān)于Vue用cmd創(chuàng)建項(xiàng)目的方法講解，有興趣的朋友們跟著學(xué)習(xí)下。2019-02-02
本篇文章主要介紹了Vue 實(shí)用分頁paging實(shí)例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-04-04