前言：
大概兩個月前投身於一個項目中去，項目是一個移動端的項目，所選用的框架是時下比較流行的vue。這篇文章也是針對這個項目和以前自己學習時的一些總結，包括一些通用的移動端開發要注意的事項、vue開發遇到的一些問題。本文的目的是為了在以后的開發中我們可以避免這些坑，提高我們的開發效率。
一、移動端開發特有問題：
1、移動端樣式的兼容性：
在當前移動端的開發要面對各種不同的手機，不同的手機DPI也是不同的，比如Iphone 8的DPI就是2，Iphone 8P的DPI就是3。為了讓頁面可以兼容不同的手機，解決方案如下：
1）對手機的視口進行設置強行無視設備的真實分辨率，設置最大最小的縮放比例並且禁止用戶進行縮放，從而達到統一的分辨率的效果。
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0, minimum-scale=1.0,use-scalable=no"
2）針對不同的手機對2x和3x的圖片進行處理：我采用stylus自己定義了一個方法來解決。在需要的地方直接引入即可。
bg-image($url) background-image url($url + "@2x.png") @media (-webkit-min-device-pixel-ratio: 3),(min-device-pixel-ratio: 3) background-image url($url + "@3x.png")
2、移動端點擊延時的問題：
這個問題我之前並沒有注意到，甚至不知道自己遇到過，我是通過論壇看到移動端開發會出現300ms的延時，往往會造成點擊延遲甚至是點擊失效的bug。造成這個問題的原因是由於移動端瀏覽器存在雙擊縮放的問題。解決這個問題可以采用：
1）采用一個插件fastclick解決，代碼也十分簡潔，在入口 注冊后，直接采用下面代碼。其實也可以自己實現fastclick的功能：自定義click阻止默認click事件的冒泡及默認行為。
fastClick.attach(document.body);
2）若是項目的兼容性要求比較低的話，可以加上一個meta標簽。
<meta name="viewport" content="width=device-width">
3、在IOS在英文輸入首字母大寫：
采用input的autocapitalize屬性對首字母大小寫進行設置：
<input type="text" autocapitalize="none" class="box">
4、長時間點擊頁面會發生閃退的問題：
在進行移動端項目調試的時候，可能出現的一個問題就是長時間按住會出現閃退，可以通過以下代碼解決。
element {-webkit-touch-callout: none;}
5、在有輸入框時進行其他操作不自動失焦：
本項目中有一個搜索界面，在搜索時對搜索結果進行下滑，輸入框不會自動失焦，手機鍵盤不會隱藏，於是可以采用對元素進行手動blur。
6、移動端左右滑動會出現白條：
在項目開發之前可以對項目進行CSSreset：設置html，body的width為100%，overflow：hidden就可以了。
二、Vue使用時遇到的一些問題：
這部分並不是什么高深的技術文章，而是記錄遇到的一些問題。
0、最重要的一點，也是放在最前面：Vue的生命周期真的很重要！很重要！重要！在使用vue進行開發的過程中，項目越大、需要的時間類型越多、數據越多等就會越來越感覺生命周期的重要性。在vue的官方文檔中對生命周期有着很詳細的說明，大家可以自行閱讀。
1、文件路徑過於冗長或者相對路徑過於麻煩：
通過webpack自定義路徑別名，就可以
// build/webpack.base.js { resolve: { extensions: ['.js', '.vue', '.json'], alias: { 'vue$': 'vue/dist/vue.esm.js', '@': resolve('src'), '~': resolve('src/components') } } }
2、組件中的樣式會相互影響。
通過為組件中的style標簽添加scoped屬性就會是組件的樣式不會外溢。Vue的scoped是通過為組件添加唯一的屬性標識來實現樣式不會污染其他組件同名元素的。
3、vue對輸入的文字時時響應：
用過vue的人都知道，vue有一個非常重要的功能就是實現了雙向數據綁定，這對於我們開發來說有着很重要的用途。但是我在進行一個搜索組件開發的過程中就發現了一個問題，由於搜索的數據是通過線上抓取的，當在輸入框輸入要搜索的信息時，搜索列表會自動加載出來。每次按鍵都會發送一個請求，這樣就大大增加了流量的消耗。於是我采用了一個數據節流的方法，設置了一個延時函數，每0.3S對輸入的數據進行檢查，而不是同步數據綁定。
4、Vuex的使用：
Vuex對於vue，就相當於Redux對於react一樣。它是vue的狀態管理模式，在多個組件共享狀態的情況下，采用vuex就顯得非常重要了。
因為組件一旦多了起來，不同組件之間數據的流動就會變得十分繁瑣並且難以維護，尤其是在兄弟組件進行通信時，就顯得格外麻煩。當兄弟組件進行通信時，首先需要一個父組件，子組件通過$dispatch向父組件進行通信，然后再由父組件進行廣播事件$broadcast傳遞給各個子組件。真個過程十分繁瑣並且難以調試。
在使用vuex遇到了這個問題：對vuex的使用時每次Store載入新的數據都會造成卡屏的現象，在了解vue的原理后知道這是由於為了得到數據到試圖的響應式變化， 會對Store中的每個對象添加setter和getter方法以實現對數據的監聽（臟檢查），但是有大量數據進入store的時候， 對每個對象都進行這樣的操作會消耗大量的時間，因此造成卡屏的現象。我想采用的方法是是應用freeze方法凍結對象， 避免vue對每個對象都進行操作，不直接訪問state里的屬性，而是采用改變Index使vue的getter間接訪問。
5、父子元素同時綁定click事件：
在開發的過程中，我們經常會遇到父子元素都綁定一個事件，當點擊子元素的時候由於事件的冒泡機制會造成對父元素事件的觸發。在原生JS中我們可以采用event.stopPropagation()阻止時間冒泡。那么在vue中如何解決這個問題。我們只需要在click后面加上一個.stop就可以了。
以上就是最近一段時間針對移動端開發和vue使用所遇到的一些情況。如果有不會的地方，可以留言給我，或給我發郵件lml19960131@126.com。讓我們共同進步！^_^
如果文章對您來說有用的話可以給我一個star嗎？https://github.com/lml19960131/music-ml