1.二次封裝cube-scroll組件

• 遇到問題:
  • 1cube-scroll組件的上拉加載功能, 在沒有數(shù)據(jù)的時候或數(shù)據(jù)一樣時, 需要調用this.refs.scroll的forceUpdate()方法, 才能結束此次加載, 從新開始下次監(jiān)聽, 這里需要把this.refs.scroll傳到父組件,
    • 解決方法: 在data中聲明一個變量, 在mounted鉤子中將, this.refs.scroll傳給這個變量, 在通過emit把scroll組件的pulling-up和pulling-down事件派發(fā)出去并把this.$refs.scroll作為參數(shù)傳過去

2.tabbar配合動態(tài)組件時候, 出現(xiàn)警告

vue.runtime.esm.js?8bc8:587 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "currentIndex"

found in

---> <DdTabbar> at src/components/dd-tabbar.vue
       <Test1> at src/components/test1.vue
         <App> at src/App.vue
           <Root>

錯誤翻譯: 避免直接改變prop, 因為props的值會被覆蓋, 當父組件重新渲染時, 用data或computed屬性復制prop的值, prop變成currentIndex

解決方式報錯已經(jīng)給出: 把prop復制到data里

3.tabbar組價配合cube-slide組件, 互相關聯(lián)index

• 1通過this.$refs.slide獲取到cube-slide的vue實例, 通過實例的訪問BScroll對象, 調用goToPage()去改變cube-slide的輪播

4.進度條
收獲: 學會了svg-progess-bar這個輕量有好用的庫的使用,

• 解決方法: 使用svg-progress-bar插件, github

5.數(shù)字快速增漲動畫效果

• 解決方法: 使用vue-count-to插件, wiki
• api:

6 移動端適配: amfe-flexible
收獲: 配合sass等, 實現(xiàn)rem適配
7 登錄接口報404,
問題 原因: 未使用Form Data方式傳遞數(shù)據(jù)
解決方法: 使用axios.transformRequest:

axios({
  ...,
  transformRequest: [function(data, headers) {
    let ret = ''
    for(item in data) {
      ret += '&' + encodeURIComponent(item) + '=' + encodeURIComponent(data[item])
    }
    ret = ret.slice(1)
    return data
  }]
})

收獲:

• Form Data和Request Payload的區(qū)別:
  • 1. Content-Type不同: Request Payload是applications/json; Form Data是 application/x-www-form-urlencoded
  • 2. 請求的數(shù)據(jù)格式不同: RP是json: {a: 'a', b: 'b'}, FD是 key1=val1&key2=val2
• 學會了axios如何提交Form Data數(shù)據(jù)

8 登錄驗證接口報跨域(在配置好devServer的情況下),這個是后臺處理的問題,

9 在使用filter時候, 對數(shù)字進行處理

• 情景: 為防止不是數(shù)組使用Number()方法轉換, 如果結果是NaN, 怎直接返回原值,
• 問題: 如何用NaN進行if()判斷,可以使用isNaN()方法, 除了數(shù)字, 都返回true

10 在使用keep-alive和cube-scroll時候, 再次返回路由的時候, 無法滑動, cube-scroll在有請求數(shù)據(jù)的時候會展示不全,

• cube-scroll請求接口顯示不全是因為, 請求接口還沒結束, cube-scroll就已經(jīng)獲取了填充內容的高, 如果請求完接口后會改變填充內容的高度, cube-ui就不會更新高度, 這樣就導致了, 顯示不全(betterScroll原理就是父子容器的高度差) => 解決方案是: 預先設定好, 內容的高度
• keep-alive這個問題目前還沒解決, 不過貌似, 時有時現(xiàn)

11 項目中出現(xiàn)很多, 單獨接口并且要求執(zhí)行順序, 使用Promise的鏈式調用,

• 在then()里邊返回下一個接口的Promise

12 請求數(shù)據(jù)時候,跳轉路由,需等待接口請求完畢才能完成路由跳轉?

• 使用axios的CancelToken取消請求, 詳情請見axios中文翻譯

13 項目中精選產(chǎn)品, 一個標題, 后邊跟著1個或若干子項,
使用遞歸組件 - 待解決

14 computed和template里無法訪問數(shù)組里的值?

解決方法: 在mutations, 異構需要的數(shù)組

15 axios.post json轉formData

• 使用內置的qs模塊的qs.stringify(), 把data參數(shù)轉一下就行了

16 cube-slide在請求接口數(shù)據(jù)的時候, initialIndex參數(shù)(設置默認頁)失效

解決方法: 查看cube-slide源碼, 發(fā)現(xiàn)凡是請求的接口, 都需要執(zhí)行一次refresh()方法, 在refresh()方法里, 初始化currentPageIndex = 0 而并非initialIndex, 手動修改

17 路由跳轉時, 中斷所有的ajax請求

解決方法:

const CancelToken = axios.CancelToken
const source = CancelToken.source()
// 將 cancelToken: source.token添加到axios配置中
// 調用source.cancel('text')

18 <component :is="">在使用動態(tài)組件時, 判斷組件切換

19 需要在v-bind指令里拼接, filter過濾的數(shù)字和字符串

解決辦法: 在v-bind里, filter會過濾掉v-bind里所有的內容, 只能在filter里進行處理, 通過正則匹配漢字部分, indexOf()和slice()獲取數(shù)字部分

20 在getters中異構state中的數(shù)據(jù)報錯, 無法直接在state中的對象里添加屬性

解決方法: 將對象進行深拷貝

• 深拷貝的方法(對象)
  • 1. Object.assign(): 只有一層深拷貝, 如果只是一層的深拷貝可以使用, 需要封深層的深拷貝可以用2
  • 2. var obj1 = JSON.parse(JSON.stringify(obj))
• 深拷貝的方法(數(shù)組)
  • 1. for循環(huán)
  • 2. slice(): var copyArr = arr.slice(0)
  • 3. concat(): var copyArr = arr.concat()
  • 4. es6 擴展符: var [ ...copyArr ] = arr

21. 在使用actions異步請求數(shù)據(jù)的時候, 報錯, 找不到數(shù)據(jù)

• 出錯原因: 在數(shù)據(jù)還未請求回來, 就進行了渲染, 使用v-if做判斷

22. 使用數(shù)組方法concat() 遇到的問題

- concat()方法不會修改原數(shù)組, 需要重新獲取concat()的值, var newArr = arr.concat(arr1)

23. 父組件跳轉子路由, 子路由里有需要請求數(shù)據(jù), 并吧數(shù)據(jù)存到vuex里, 每次跳到路由, 都會重復請求一次接口, 就會疊加重復數(shù)據(jù)

• 出錯原因, vuex中的數(shù)據(jù)并沒有被清理, 而進入路由前都會再次請求一次接口, 這導致了數(shù)據(jù)的重復獲取
• 解決方案:
  • 在組件中的beforeRouteLeave(){}鉤子中, 初始化vuex中的數(shù)據(jù) - 這樣的話每次進入都會重復請求數(shù)據(jù)
  • 在請求數(shù)據(jù)時做一個判斷, 如果有數(shù)據(jù)則不再請求數(shù)據(jù), 對于上拉加載的需要在vuex定義對應的頁數(shù) - 這種方案, 有點復雜, 但是可以減少http請求, 推薦 - 這里需要注意一點: 不可吧state中記錄頁數(shù)的數(shù)據(jù)緩存到變量里, 而要直接使用, 否則mutations的改變不會更新到緩存的變量里

24. 使用keep-alive時, api的數(shù)據(jù)被緩存之后, 在切回來, 報錯Unable to preventDefault inside passive event listener due to target being treated as passive -> 無法監(jiān)聽touch事件

• 原因: 不明
• 解決方案: 在css里添加* { touch-action: none; }, 很tm神奇

25. 我想把cube-scroll的組件BScroll對象, 傳到回到頂部組件, 在mounted里獲取不到這個BScroll

• 這是因為BScroll對象, 這個時候, 還沒有實例化, 需調在$nextTIck()里面獲取

26. 如何往vue的動態(tài)組件<component :is="">里傳值

• ps: if()判斷的時候, undefined不要加 ''

27. 使用keep-alive時候, 使用Bus, 不在activated()鉤子里emit事件, 是無法on監(jiān)聽到, 在請求玩接口的.then()函數(shù)里監(jiān)聽不到bus.$emit()的事件, 這個目前不知道為啥, 但是問題解決了

• 解決方案: vue內置組件<component :is=""> 是支持props和$emit的

28. 怎么判斷對象{}為空

- 方法一: 

var c = {};
if(JSON.stringify(c) == "{}"){ console.log(7);}

29. keep-alive問題, keep-alive的鉤子函數(shù)activated()子組件比父組件優(yōu)先執(zhí)行,