本文參考自油管上某個國外大神的公開演講視頻，學(xué)習(xí)了一下覺得很不錯，所以在項目中也使用了這些不錯的技巧。

下面就分享幾個簡單的技巧讓你寫出的vue.js代碼更優(yōu)雅

如果參數(shù)比較多，比如上圖

• 關(guān)鍵字篩選，
• 區(qū)域篩選，
• 設(shè)備ID篩選，
• 分頁數(shù)，
• 每頁幾條數(shù)據(jù)，

可能會是這樣：

不過這么寫，明顯有問題，主要是watch了很多參數(shù)，而且函數(shù)的處理都差不多，可以修改一下，通過methods處理。

當(dāng)然這么寫，需要在模板里面每個參數(shù)change的地方綁定事件，并傳遞參數(shù)值,比如分頁change時：

相比上面的各種watch，代碼明顯少了很多，但是還有一個問題，那就是要在template的很多地方綁定change事件。

最后，當(dāng)然是使用我們重點推薦的computed+watch了。

2.使用mixin提取公共部分

• 很多列表頁其實使用的很多屬性都是一樣的，比如：
• 分頁page
• 數(shù)量size
• 搜索關(guān)鍵字keyword
• 表格數(shù)據(jù)tableData

這些公共的部分其實可以通過mixin來提取出來。

在要用到的頁面。

3.自動注冊全局組件

正常情況下，我們需要使用一個我們自己封裝的組件時，需要先引入，再注冊，最后才能在template模板中使用。

當(dāng)有多個頁面需要用到這些組件時，那么就需要在每個需要的頁面重復(fù)這些步驟。

為了簡化這些步驟，可以考慮把這些組件作為全局組件來使用，這樣每個頁面需要時，就可以直接使用了。

不過還有一個問題，那就是需要我們手動的全局注冊。

當(dāng)組件多了以后，手動注冊也變得繁瑣起來，可以通過require.context()實現(xiàn)自動注冊組件。

4.自動注冊vuex模塊

之前我們是這么注冊vuex模塊的：

可以發(fā)現(xiàn)每個模塊都要我們手動導(dǎo)入，然后加入到module里面，如此重復(fù)。

當(dāng)模塊不多還好，假如項目大了，有50個模塊，那就得要做很多重復(fù)的工作。跟注冊組件一樣，我們還是利用require.context來實現(xiàn)。