[TOC] ## 前言 不斷更新中，請一直關注哦。 ## 列表 ### v-if 與 v-for的使用 一般我們習慣將v-for與v-if一起使用，官方建議將v-if寫在容器上，而v-for寫在遍歷元素上，避免不需要的元素進行了列表渲染。 [官方鏈接](https://cn.vuejs.org/v2/style-guide/#%E9%81%BF%E5%85%8D-v-if-%E5%92%8C-v-for-%E7%94%A8%E5%9C%A8%E4%B8%80%E8%B5%B7-%E5%BF%85%E8%A6%81) ### computed等生命周期函數支持數組格式 沒有特別大的用途，知道就好，可以對其設置一個數組，數組中為需要執行的函數 ``` export default { ... created: [ function one () { console.log(1) }, function two () { console.log(2) } ] ... } ``` ### 組件屬性多個數據類型，好處是可以更靈活的支持 那么，在使用的時候，只要根據不同的類型進行對應的解析即可。 ``` computed: { computedWidth () { let o = {} if (typeof this.width === 'string') o.width = this.width if (typeof this.width === 'number') o.width = this.width + 'px' return o } } ``` ### 不想在循環的時候多循環標簽 ``` <template v-for="item in data"> </template> ``` ### prop屬性早于可以data屬性 data初始化可以指定用prop的部分，但需要做一定的判斷。 但還是不建議在data里直接用prop做初始化，更加建議用生命周期處理這樣的問題。 ### errorCaptured 生命周期函數 當你需要把子組件的渲染錯誤暴露出來，自己處理的時候，可以封裝下。 ``` /** * 收到三個參數： * 錯誤對象、發生錯誤的組件實例 * 以及一個包含錯誤來源信息的字符串。 * 此鉤子可以返回 false 以阻止該錯誤繼續向上傳播。 */ errorCaptured (err, vm, info) { console.log(err) // -> ReferenceError: consle is not defined ... console.log(vm) // -> {_uid: 1, _isVue: true, $options: {…}, _renderProxy: o, _self: o,…} console.log(info) // -> `mounted hook` // 告訴我們這個錯誤是在 vm 組件中的 mounted 鉤子中發生的 // 阻止該錯誤繼續向上傳播 return false } ``` ### 封裝對象屬性與檢測變化值 場景：當我們進行一系列的條件檢測的時候，發現其執行的函數是一致的，比如任何搜索條件變化，都將導致加載數據loadData方法，那么我們將這些都封裝到options對象中。watch可以幫我們做到這些。 ``` data(){ return { options:{ pageNo:1, pageSize:10, keyword:'', date: null } } }, watch:{ options:{ deep:true, handler(val){ this.loadData() } } } ``` 測試發現了問題，當頁數不為第一頁的時候，其他搜索條件發生變化，此時應該吧頁數重置為1，而當頁數本身發生變化時，不用執行這個操作。但是watch無法檢測到前后的變化情況。為了解決這個問題，我們可以通過計算屬性,有計算屬性時，可以檢測到前后的變化值。 ``` computed:{ newOptions(){ return JSON.parse(JSON.stringfy(this.option)) } }, watch:{ newOptions:{ deep:true, handler(val,oldval){ // 發生變化的時候 檢測是否是頁數的變化，如果不是 那么設置頁數為1 if(val.pageNo === val.pageNo) this.option.pageNo = 1 this.loadData() } } } ``` ### vue輪播圖技術選型 - [ vue-awsome-swiper簡書連接](https://www.jianshu.com/p/4f92c4461e3d?utm_source=oschina-app) ### 手機端滾動效果的 - [better-scroll上手鏈接](https://www.jianshu.com/p/ed73f3784ce9) ### $nextTick的作用 它主要用于解決需要在dom變動之后獲取某些內容或者位置或者樣式。這是因為我們通過改變數據改變內容時，dom的變動不是實時的同步的，而是放到一個事件隊列中，通過對比更新之后才會發生真的代碼改變。 如果我們在這時需要馬上拿到變化后的元素的變化，我們需要把相應的代碼寫到$nextTick內部，因為這個函數知道上次循環隊列完成的時機。 ## 更多