大前端的概念一而再再而三的被提及，那么大前端時代究竟是什么呢？大前端這個詞最早是因為在阿里內部有很多前端開發(fā)人員既寫前端又寫 Java 的 Velocity 模板而得來，不過現在大前端的范圍已經越來越大了，包含前端 + 移動端，前端、CDN、Nginx、Node、Hybrid、Weex、React Native、Native App。筆者是一名普通的全職 iOS 開發(fā)者，在接觸到了前端開發(fā)以后，發(fā)現了前端有些值得移動端學習的地方，于是便有了這個大前端時代系列的文章，希望兩者能相互借鑒優(yōu)秀的思想。談及到大前端，常常被提及的話題有：組件化，路由與解耦，工程化（打包工具，腳手架，包管理工具），MVC 和 MVVM 架構，埋點和性能監(jiān)控。筆者就先從組件化方面談起。網上關于前端框架對比的文章也非常多（對比 React，Vue，Angular），不過跨端對比的文章好像不多？筆者就打算以前端和移動端（以 iOS 平臺為主）對比為主，看看這兩端的不同做法，并討論討論有無相互借鑒學習的地方。
一. 組件化的需求
為了提高代碼復用性，減少重復性的開發(fā)，我們就把相關的代碼按照 ?template、style、script 拆分，封裝成一個個的組件。組件可以擴展
HTML 元素，封裝可重用的 HTML 代碼，我們可以將組件看作自定義的 HTML 元素。在 Vue 里面，每個封裝好的組件可以看成一個個的 ViewModel。
二. 如何封裝組件
談到如何封裝的問題，就要先說說怎么去組織組件的問題。
如果在簡單的 SPA 項目中，可以直接用 Vue.component 去定義一個全局組件，項目一旦復雜以后，就會出現弊端了：
- 全局定義(Global definitions) 強制要求每個 component 中的命名不得重復
- 字符串模板(String templates) 缺乏語法高亮，在 HTML 有多行的時候，需要用到丑陋的 \
- 不支持 CSS(No CSS support) 意味著當 HTML 和 JavaScript 組件化時，CSS 明顯被遺漏
- 沒有構建步驟(No build step) 限制只能使用 HTML 和 ES5 JavaScript, 而不能使用預處理器，如 Pug (formerly Jade) 和 Babel
而且現在公司級的項目，大多數都會引入工程化的管理，用包管理工具去管理，npm 或者 yarn。所以 Vue 在復雜的項目中用 Vue.component 去定義一個組件的方式就不適合了。這里就需要用到單文件組件，還可以使用 Webpack 或 Browserify 等構建工具。比如下面這個Hello.vue組件，整個文件就是一個組件。
在單文件組件中，整個文件都是一個 CommonJS 模塊，里面包含了組件對應的 HTML、組件內的處理邏輯 Javascript、組件的樣式 CSS。
在組件的 script 標簽中，需要封裝該組件 ViewModel 的行為。
- data
組件的初始化數據，以及私有屬性。
- props
組件的屬性，這里的屬性專門用來接收父子組件通信的數據。（這里可以類比 iOS 里面的 @property ）
- methods
組件內的處理邏輯函數。
- watch
需要額外監(jiān)聽的屬性（這里可以類比 iOS 里面的 KVO ）
- computed
組件的計算屬性
- components
所用到的子組件
- lifecycle hooks
生命周期的鉤子函數。一個組件也是有生命周期的，有如下這些：beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、activated、deactivated、beforeDestroy、destroyed等生命周期。在這些鉤子函數里面可以加上我們預設的處理邏輯。（這里可以類比 iOS 里面的 ViewController 的生命周期 ）
如此看來，在 Vue 里面封裝一個單文件組件，和在 iOS 里面封裝一個 ViewModel 的思路是完全一致的。接下來的討論無特殊說明，針對的都是單文件組件。
三. 如何劃分組件
一般劃分組件分可以按照以下標準去劃分：
- 頁面區(qū)域：
header、footer、sidebar……
- 功能模塊：
select、pagination……
?
