Vue代碼怎樣寫才漂亮？

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

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

如果參數比較多，比如上圖

關鍵字篩選，區域篩選，設備ID篩選，分頁數，每頁幾條數據，

可能會是這樣：

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

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

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

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

2. 使用mixin提取公共部分

很多列表頁其實使用的很多屬性都是一樣的，比如：分頁 page數量 size搜索關鍵 字keyword表格數據 tableData

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

在要用到的頁面。

3. 自動注冊全局組件

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

當有多個頁面需要用到這些組件時，那么就需要在每個需要的頁面重復這些步驟。

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

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

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

4. 自動注冊vuex模塊

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

可以發現每個模塊都要我們手動導入，然后加入到module里面，如此重復。

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