關於一次開發過程中所遇到的問題的總結

2022-08-16 20:36:20 字數 2571 閱讀 9549

第乙個遇到也是困擾最久的問題

vant的card元件在數量改變後不會主動重新整理,為此浪費了很多時間,繞了很大的圈子,原本使用的是強制重新整理,雖然這種方法不夠優雅,但事實上這原本應該是最終的解決方案,如果不是後來的右滑重新整理無法同步重新整理的話。經過搜尋得出最終的我心中的完美解決方案。

遇到的問題描述

vant的card元件在數量改變後不會主動重新整理,即商品數量已經改變,但是頁面上並沒有改變,元件沒有重新渲染

引發問題的原因

在右滑刪除無法呼叫重新整理方法來強制重新整理元件來應用改變時,只好拋棄原有方法,在搜尋過程中也發現了引起此問題的原因。

因為商品數量是以乙個陣列來儲存的,而此處使用了v-for,理所當然地使用了索引作為下標從陣列中獲取資料,即

而通過上圖可知,vue不能 檢測到以上兩種型別的陣列內資料變動,而我原來的做法為++或--,都是vue無法檢測到的變動。

最終的解決方案

接下來遇到的問題算是第乙個問題引起的併發症

遇到的問題描述

vant的card元件在新增和刪除商品等強制重新整理時,會使得頁面瀏覽位置改變,即彈回頁面頂部等影響使用者使用體驗的問題

引起這個問題的原因

具體原因不明,但是按照除錯過程的觀察發現總結為,在頁面長度不滿百分之100時,強制重新整理card元件導致瀏覽位置發生變化

最終解決方法

最早的解決方法是在頁面底部放置空白的塊,使得頁面長度超過百分之100。在第乙個問題解決後事實上這個問題也自動解決了,不需要強制重新整理card元件,只是自動重新渲染元件,所以不再出現瀏覽位置改變的情況

乙個不算bug的問題吧,但是同樣有記錄價值

此處的orders是store中的全域性物件

此處直接使用v-model來繫結orders物件中的屬性,可以實現資料雙向繫結

此處以name為例,name是同樣是來自store的全域性物件,但是直接使用v-model是無效的,修改的資料無法被寫入,因此需要以上圖方式來定義set函式**store中的函式來修改,以此實現資料雙向繫結

為了使頁面具有一致性

關於頁面底部留白的問題

因為vant的submitbar元件有遮罩層,這會導致頁面最後一些地方被遮住無法看到或者進行操作

關於重新整理路由跳轉的問題

因為兩步為不同頁面,因此在第二個頁面重新整理時需要重定向到第乙個頁面,於是上網搜尋,找到乙個方法,

這裡引用搜尋到的網圖,因為我的**已經修改,在本地測試的時候未發現問題,但部署到伺服器後發現問題。

遇到的問題描述

需要點選兩次提交按鈕才能跳轉至第二頁,但是這種情況在重新整理一次後即消失,便於下文描述,因此定義第乙個頁面為a,第二個頁面為b

引起這個問題的原因

因為vue 的生命週期還沒有怎麼學習過,因此這裡的原因分析出自我多次測試後總結的。

首先關於點選兩次才能進行跳轉的問題的個人分析:第一次點選的時候建立了對應元件b,即原本的跳轉目標元件,此時呼叫了b(該元件)的created方法,進行了一次判斷,並且返回a(第一頁)。而第二次點選時,因為b(目標元件)在第一次點選按鈕時已經被建立,所以不會觸發b的created方法,因此可以正常跳轉。

關於為什麼重新整理之後此問題自動消失的個人分析:重新整理時首先進入b(當前頁面),呼叫了b(當前頁面)的created方法,進行判斷後跳轉至a(第乙個頁面),此時雖然頁面跳轉,但b元件已經建立成功,所以在a(第乙個頁面)點選跳轉時,並不會觸發b的created

最終解決方案

在a跳轉時傳送乙個引數用於標記,說明此時是從a跳轉至b

在b的created的方法中進行修改,需要驗證enter是否為true,即是否從a跳轉至b,如果是則不進行重定向,並且將enter修改為false,以便重新整理時能進行重定向,儘管不夠優雅,但不失為乙個解決方法

專案開發過程中遇到的問題

問題分類 1 邏輯問題 結構 處理流程的設計有問題,尤其在多執行緒操作同乙個物件時 2 介面定義和使用問題 例如介面結構或返回情況改了,未及時編譯或更改其他模組的呼叫 3 對接問題 對講問題不是你的問題,就是我的問題,需要聯查 4 理解問題 對功能 邏輯流程或函式定義和使用的理解不清晰 5 異常處理...

開發過程中遇到的兼用問題

1.低版本瀏覽器不支援html5新增的標籤 方法 引入第三方庫html5shiv.js 2.ul標籤在ie瀏覽器中有margin,在firefox瀏覽器中有padding 方法 在設定css時,設定margin 0 padding 0 3.ie6下使用margin 0 auto 無法居中 方法 為父...

C 開發過程中,遇到問題

在c 中,值型別不能為空。根據定義,值型別有乙個值,甚至值型別的未初始化變數也必須有乙個值。這稱為該型別的預設值。這將導致在檢查變數是否未初始化時引發異常 point 提供有序的 x 座標和 y 座標整數對,該座標對在二維平面中定義乙個點。pen 定義用於繪製直線和曲線的物件。此類不能被繼承。cla...