使用vue開發項目須要注意的問題和可能踩到的坑

最近,在公司給一些剛剛使用vue進行開發的同窗作了一次分享, 其中包括一些vue開發中須要注意的點, 以及一些可能會踩到的坑.具體內容以下:

一.生命鉤子使用須要注意的地方

1.beforeCreate
文檔描述:在實例初始化以後，數據觀測 (data observer) 和 event/watcher 事件配置以前被調用。
注意: 在這個鉤子上，this變量還不能使用，data裏的屬性，methods方法裏的方法，watcher中的事件都沒法得到；
2.created
文檔描述:在實例建立完成後被當即調用。在這一步，實例已完成如下的配置：數據觀測 (data observer)，屬性和方法的運算，watch/event 事件回調。然而，掛載階段還沒開始，$el 屬性目前不可見。
注意: 這個時候能夠操做vue實例中的數據和方法, 可是因爲尚未掛載, 還不能對dom節點進行操做.
3.mounted
文檔描述:el 被新建立的 vm.$el 替換，並掛載到實例上去以後調用該鉤子。若是 root 實例掛載了一個文檔內元素，當 mounted 被調用時 vm.$el 也在文檔內。
注意: 掛載完畢，這時dom節點被渲染到文檔內，一些須要dom的操做在此時才能正常進行

二.重要選項的使用注意的地方

data
data 用來存放實例的響應式屬性
*組件的定義只接受function
*data 應該只能是數據 - 不推薦觀察擁有狀態行爲的對象。
*以 _ 或 $ 開頭的屬性 不會 被 Vue 實例代理，由於它們可能和 Vue 內置的屬性、API 方法衝突。

computed
*依賴的必須是響應式屬性變化纔會從新計算。

methods,watch
*不該該使用箭頭函數來定義 method 函數,理由是箭頭函數綁定了父級做用域的上下文，因此 this 將不會按照指望指向 Vue 實例

三.組件通訊中須要注意

經過 Prop 向子組件傳遞數據
*props 的大小寫,父組件中的template中屬性使用kebab-case,在子組件的props接收時使用camelCase.vue會自動轉換.(不在template中使用camelCase的緣由是由於html對大小寫不敏感)
*props 只能實現父到子的單向下行綁定,防止從子組件意外改變父級組件的狀態
*不該該在一個子組件內部改變 props

經過事件向父級組件發送消息
*和prop 不一樣，事件名不存在任何自動化的大小寫轉換,官方推薦始終使用 kebab-case 的事件名.

 

四.其餘常見的問題

1.沒法覆蓋ui庫樣式
vue提供了組件做用域的css, 覆蓋ui庫的樣式, 不能設置scoped屬性
<style lang=「less」 scoped></style>

2.生產環境代碼去除.map文件
map文件用於定位到源碼的位置,方便調試,可是文件會比較大,生產環境建議關掉
在文件Config/index.js中,設置productionSourceMap: false

3.是否使用vuex
官方: 因爲狀態零散地分佈在許多組件和組件之間的交互中，大型應用複雜度也常常逐漸增加。爲了解決這個問題，Vue 提供 vuex.

4.組件的劃分粒度
根據項目狀況, 項目越大越複雜, 粒度越細

5.使用axios請求失敗
get請求數據放在 params中, post,put等其餘method時,請求數據放在data中, 二者能夠一塊兒使用

6.是否使用vuex
官方文檔: 因爲狀態零散地分佈在許多組件和組件之間的交互中，大型應用複雜度也常常逐漸增加。爲了解決這個問題，Vue 提供 vuex.
即: 大型項目,狀態較複雜時才使用.在小型項目中,不建議使用,由於反倒會增長項目的複雜度.

7.vue-cli默認配置打包後部署至特定路徑下靜態資源路徑錯誤問題

緣由: 由上能夠看出是資源打包路徑有誤，打包後的資源使用了絕對根目錄路徑，所以將項目部署到特定目錄下，其引入的資源路徑沒法被正確解析。

解決方法:
在打包時須要使用相對路徑來處理靜態資源
config/index.js, build對象
assetsPublicPath: '/' 改成 assetsPublicPath: './'

 

8.靜態資源打包使用相對路徑後css文件引入大圖片路徑錯誤問題。
緣由: css是寫在vue文件中的，css文件首先被less，postcss等處理，處理後會被ExtractTextPlugin處理，ExtractTextPlugin將js中的css所有抽離至app.css文件中,ExtractTextPlugin抽離css文件時沒有轉換資源引入路徑.

解決方案:1.修改webpack.prod.conf.js webpackConfig的extrat: false(不推薦)2.build/util.js設置: return ExtractTextPlugin.extract({ fallback: 'vue-style-loader', publicPath:"../../" })3.將靜態資源放在static目錄下(圖片名稱中沒法增長md5字符串，不利於版本控制)