vue2升級(jí)vue3問(wèn)題bug解決分析整理
一.依舊使用vue2的寫法所遇到的問(wèn)題
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寫法錯(cuò)誤
解決方法：
改成:
computed: {
...mapGetters({ isalive: "alive" })
},或
computed: {
...mapGetters("alive")
},二.使用vue3的setup寫法所遇到的問(wèn)題
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升級(jí)之前的寫法是rootValue:37.5,但是經(jīng)過(guò)轉(zhuǎn)換后的尺寸卻特別的小，頁(yè)面看起來(lái)就像是平板或者pc上的，經(jīng)過(guò)測(cè)試發(fā)現(xiàn)改成rootValue:16或者viewportWidth: 375會(huì)和升級(jí)之前的rootValue:37.5幾乎沒(méi)有差別
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升級(jí)vue3遇到的問(wèn)題解決分析整理的詳細(xì)內(nèi)容，更多關(guān)于vue2升級(jí)vue3問(wèn)題解決的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！
相關(guān)文章
element的el-table中記錄滾動(dòng)條位置的示例代碼
這篇文章主要介紹了element的el-table中記錄滾動(dòng)條位置的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-11-11
Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題
這篇文章主要介紹了Element ui table表格內(nèi)容超出隱藏顯示省略號(hào)問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,2023-11-11
Vue實(shí)現(xiàn)控制商品數(shù)量組件封裝及使用
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)控制商品數(shù)量組件的封裝及使用，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09
vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能(示例詳解)
最近在開發(fā)工業(yè)品超市的后臺(tái)系統(tǒng),遇到一個(gè)需求,就是實(shí)現(xiàn)在一個(gè)table表格中多選數(shù)據(jù),在網(wǎng)上查了好多,有些方法真的是無(wú)語(yǔ),下面通過(guò)本文給大家分享vue+elementUi中的table實(shí)現(xiàn)跨頁(yè)多選功能,感興趣的朋友跟隨小編一起看看吧2024-05-05
Vue中子組件不能修改父組件傳來(lái)的Prop值的原因分析
在Vue中，父子組件之間通過(guò)Prop和Event實(shí)現(xiàn)了數(shù)據(jù)的雙向綁定，但是，Vue設(shè)計(jì)者為什么不允許子組件修改父組件傳遞的Prop呢，本文就來(lái)帶大家探究為什么子組件不能修改Prop,需要的朋友可以參考下2023-06-06
Vue Axios異步與數(shù)據(jù)類型轉(zhuǎn)換問(wèn)題淺析
總的來(lái)說(shuō)這并不是一道難題，那為什么要拿出這道題介紹？拿出這道題真正想要傳達(dá)的是解題的思路，以及不斷優(yōu)化探尋最優(yōu)解的過(guò)程。希望通過(guò)這道題能給你帶來(lái)一種解題優(yōu)化的思路，Axios是一個(gè)開源的可以用在瀏覽器端和Node JS的異步通信框架，主要作用就是實(shí)現(xiàn)AJAX異步通信2023-01-01
Vue中如何合并el-table第一列相同數(shù)據(jù)
這篇文章主要介紹了Vue中如何合并el-table第一列相同數(shù)據(jù)問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-03-03
Vue3造輪子之Typescript配置highlight過(guò)程
這篇文章主要介紹了Vue3造輪子之Typescript配置highlight過(guò)程,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-07-07
atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程
這篇文章主要介紹了atom-design(Vue.js移動(dòng)端組件庫(kù))手勢(shì)組件使用教程,非常不錯(cuò)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2019-05-05
axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作
這篇文章主要介紹了axios解決高并發(fā)的方法:axios.all()與axios.spread()的操作，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-11-11