Vuejs的生命週期

每個 Vuejs 的例項，都會經歷下圖的生命週期。

可以看出，基本週期是：

1. created (建立好DOM)
2. mounted (頁面基本準備好了。)
3. updated (update 可以理解成人肉手動操作觸發)
4. destroyed （銷燬)

上面步驟中的 1,3,4都是自動觸發。 每個步驟都有對應的 beforeXyz方法

所以, 我們一般使用 mounted 作為頁面初始化時執行的方法

---

最佳實踐

適當的使用vuex

能不用就不用。 能用就用。

不要為了使用而使用，例如一個小方法就可以搞定的事情，搞出五個設計模式來實現。

不要過度使用CSS框架

因為CSS框架一般會大幅度增加檔案體積。 例如 bootstrap, ele.me前端框架。 這個在低端安卓機上影響顯著。 特別是使用Android中的 Webview 來載入H5頁面時，基本上1k大小的CSS就會消耗1ms.

而CSS框架動輒幾百K，每次手機端都要等好久，才會開啟對應的頁面。

使用CDN來存放圖片檔案

例如， upyun 就是個不錯的選擇。 阿里的oss也很好。

js, css 儘量使用壓縮

我們在nginx中可以設定這一項。 讓js, css 都以zip的形式來傳送和接收，一般都會有效減少30%-60%的體積和傳送時間。 具體請參考nginx文件。

靈活使用第三方Vue 外掛

例如： 輪播圖， 表單驗證等等。這些輪子都是現成的。

好的程式設計師不一定演算法好，但一定是一個對各種第三方元件見多識廣的人。

前端邏輯務必簡單

能在後臺處理的，絕對不要放在前端處理。 因為Vuejs 擅長的不是處理資料結構。

例如，前端需要展示一個列表的話，後端的介面就應該給出JSON中的陣列， 而不是給出一個字串，然後由前端去解析。

不用寫行末分號。

Vuejs 原始碼中沒有一行有 “行末分號”。會有es 前處理器幫我們填上的。

靈活使用CSS，HTML預處理工具

我們知道，

• JADE， HAML可以生成HTML，
• SASS， SCSS，LESS可以生成CSS

如果是公司的人數比較多，有UI， 有前端，那麼建議大家使用的話要慎重。建議直接使用原生的HTML，CSS。 因為UI設計師同學不一定看得懂SCSS, JADE

如果是一個人獨立負責整個專案，那麼用JADE, SCSS也沒問題。