摘要：它會檢測出最大靜態子樹就是不需要動態性的子樹并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的同時跳過比對。需要注意的是，中的操作必須是同步的，不可以存在異步操作的情況。

新增：哈哈，最近又推出了 vue 的文章，在這里放個鏈接~
手把手教你從零寫一個簡單的 VUE

感謝有人看我扯技術，這篇文章主要介紹最近非?；鸬膙ue2前端框架的特點和vue2+vuex2+webpack2各種2的前后端同構渲染架構搭建流程，最后會附上代碼，文章想到啥寫啥，如果存在錯誤，或者大家有什么意見建議，歡迎大家指出來

vue2出來之后，基本上逛論壇逛技術群都能看到各種文章，各種討論 ，一時間大家都在學習vue2了 ，我今年年初就開始接觸vue，最初也是在react ，angular，vue 之中對比選擇，最終選擇了vue，因為其對前端比較友好（使用正常的模板，而不是JSX）、概念及學習成本相對簡單(對于團隊開發，引入技術必須要考慮其學習成本)，下面介紹下我理解的vue2和vue1的不同之處 ，如有不足，歡迎補充:

1.引入了virtual Dom

在vue1中，數據和視圖的綁定流程是通過 Object.defineProperty將數據轉化為getter/setter,getter/setter中加入watcher，當對數據進行操作的時候，setter的watch被觸發重新計算，然后更新和這個數據有關聯的dom元素，這就是vue1的數據驅動視圖原理
在vue2中，數據的綁定和觸發和vue1相同，基本原理都是通過Object.defineProperty對數據加入"鉤子"，以便在數據發生變化的時候得以響應，而在響應之后，不像vue1一樣直接更新dom元素，而是放入virtual Dom中，進行比對計算，然后對dom元素做相應的處理。下面是vue1和vue2的響應流程對比
vue:

vue2:

關于virtual Dom: 虛擬dom最初是在react上面認識的，其實做的事情就是在js內存中建立好dom的結構，然后再更新虛擬dom時做差異比對，將差異的地方真正更新到頁面中，做到最小化頁面的渲染。當然，也不是說對于所有情景，虛擬dom的性能都是最好的，畢竟比起直接操作dom元素，他還是需要在內存中進行計算，因此對于少量的元素更新，可能其性能比起直接操作dom元素要差。當然虛擬dom的引入，不只是在性能方面的考慮，虛擬dom可以帶來編程的變化，比如你可以使用render方法直接創建新的節點,虛擬dom也是vue2可以進行服務端渲染的關鍵，由于虛擬dom是在內存重點，vue2的ssr可以將虛擬dom直接生成html的字符串，從而實現ssr。除此之外，vue2 從模板到 virtuel-DOM 的編譯階段使用了一些高階優化：
(1). 它會檢測出靜態的 class 名和 attributes 這樣它們在初始化渲染之后就永遠都不會再被比對。    
   (2). 它會檢測出最大靜態子樹 (就是不需要動態性的子樹) 并且從渲染函數中萃取出來。這樣在每次重渲染的時候，它就會直接重用完全相同的 virtual nodes 同時跳過比對。
   這些高階優化通常只會在使用 JSX 時通過 Babel plugin 來做，但是 vue2 即使在使用瀏覽器內的編譯器時也能做到。

2.組件事件傳遞機制的改變，組件數據雙向綁定的去除

vue2組件廢除了$dispath/$broadcast父子組件的事件傳播方式，廢除了過濾器，props參數等的數據雙向綁定以及處理功能，說明作者希望使用者通過建立全局的狀態管理，事件管理機制，通過使用事件中心，允許組件自由交流，無論組件處于組件樹的哪一層，將狀態管理集中在一起處理，官方提供的vuex就是用來幾種管理狀態的。

3.服務端渲染 ssr:server-side-render

由于virtual dom的引入，使得vue的服務端渲染成為了可能，下面是官方 vue-server-renderer提供的渲染流程圖:

可以看出vue的server-side-render有三部分組成，一部分是頁面的源碼（source），還有node層的渲染部分和瀏覽器端的渲染部分。
source分為兩種entry point,一個是前端頁面的入口client entry,主要是實例化Vue對象，將其掛載到頁面中；另外一個是后端渲染服務入口server entry,主要是控服務端渲染模塊回調，返回一個Promise對象，最終返回一個Vue對象（經過測試，直接返回Vue對象也是可以的）;
前面的source部分就是業務開發的代碼，開發完成之后通過 webpack 進行構建，生成對應的bundle，這里不再贅述client bundle,就是一個可在瀏覽器端執行的打包文件；這里說下server bundle, vue2提供 vue-server-renderer模塊，模塊可以提供兩種render: rendererer/bundleRenderer ,下面分別介紹下這兩種render。
renderer接收一個vue對象 ，然后進行渲染，這種對于簡單的vue對象,可以這么去做，但是對于復雜的項目，如果使用這種直接require一個vue對象，這個對于服務端代碼的結構和邏輯都不太友好，首先模塊的狀態會一直延續在每個請求渲染請求，我們需要去管理和避免這次渲染請求的狀態影響到后面的請求,因此vue-server-renderer提供了另外一種渲染模式，通過一個 bundleRenderer去做渲染。
bundleRenderer是較為復雜項目進行服務端渲染官方推薦的方式，通過webpack以server entry按照一定的要求打包生成一個 server-bundle,它相當于一個可以給服務端用的app的打包壓縮文件，每一次調用都會重新初始化 vue對象，保證了每次請求都是獨立的，對于開發者來說，只需要專注于當前業務就可以，不用為服務端渲染開發更多的邏輯代碼。
   renderer生成完成之后，都存在兩個接口，分別是renderToString和renderToStream，一個是一次性將頁面渲染成字符串文件，另外一個是流式渲染，適用于支持流的web服務器，可以是請求服務的速度更快

4.除了上面說的那些不同，vue2在生命周期管理，動畫機制等地方都與vue有些差別，具體請瀏覽migration

相對于 vue2和vue 較大改動，vue的狀態管理工具    vuex的改動不是很大，底層改動由于時間關系還沒有來得及細究，但是在使用方面多了幾個 Helper，利用ES6的展開函數可以更加方便的使用state,getters,mutations,actions。下面簡單介紹下vuex各個部分的概念


state是一個全局的狀態存儲，數據會存儲在其中，vue組件可以直接訪問其中的值，但是只可以讀，不可以進行寫操作

getter,有些時候我們需要對獲取的數據進行加工，而不是直接獲取state中的數據，這時候可以通過getter定義函數，返回對應的數據

mutations是vuex中唯一一個可以修改數據的地方，mutations可以定義事件函數，在vue組件中可以通過commit發射事件，調用函數。需要注意的是，mutations中的操作必須是同步的，不可以存在異步操作的情況。

actions和 mutation比較相似，不同的是actions中不直接修改state，而是通過commit調用mutations修改數據，而且actions中可以存在異步處理邏輯

webpack2 和 webpack對比，有以下的新特性:

ES6 Modules : webpack 2 已經支持原生的 ES6 的模塊加載器了，這意味著 webpack 2 能夠理解和處理 import和export了，而不用把他們轉化成 CommonJS 來處理了。
用 ES6 來做代碼拆分 : ES6 的模塊加載器定義了System.import這一個方法，System.import能夠在運行時動態加載 ES6 模塊。
混合使用 ES6 和 AMD 和 CommonJS (Mixing ES6 with AMD and CommonJS)

更加具體的新特性可以瀏覽鏈接地址

好了，前面扯了那么多東西，估計沒什么人看，我們還是回歸題目，開始敲代碼吧，哈哈，接下來我會使用vue2 + vuex2 + webpack2 搭建一個簡單的 ssr項目，能夠直出頁面，還能夠保存成靜態文件。雖然官方頁面響應的實例vue-hackernews-2.0，但是如果一開始把代碼下下來，還是不太容易理解的，所以我參考其例子，從零開始搭建項目,源碼在文章的最后
首先當然是使用npm init新建一個項目
然后往package.json中寫入下列依賴

然后運行 npm i ,然后去上個廁所，喝杯茶也行，等所有的依賴安裝完畢
介紹下一些模塊的作用 vue，vuex 為vue項目使用的基本框架，express,vue-server-renderer,serialize-javascript為服務端渲染使用的模塊，babel-*為ES6轉換成ES5模塊，其他的webpack*,*-loader為webpack構建所需要的模塊，如果需要項目學習webpack的使用，可以閱讀官方文檔
安裝階段完成了，下面進入愉快的編碼階段了，其實按照流程應該是編碼同時搞定打包、開發環境配置等工作的，為了文章的效果，就分開說了
制作的頁面是一個沒有什么業務情景的頁面(請原諒我，想到什么就寫什么代碼了)，主要是為了演示組件的引用流程，vuex狀態管理以及引用，狀態改變之后的視圖更新，異步操作的視圖更新，所以，當你下了源碼，大概頁面，你會看到下面這個奇奇怪怪的東西：

好了不要在意這些細節了，我們來看看這個怪怪的東西是怎么出來的，先展示下項目最終的目錄結構：

其中index.html就是頁面最終生成頁的模板頁，里面有簡單的頭部信息和占位符，可以在服務端渲染后進行內容替換
app.js就是頁面的邏輯入口文件，Vue對象在這里實例化，其中使用的store，route可以在實例化中傳入

可以看到app.js引用了App.vue組件,.vue是vue官方推出的單文件開發方式，配合webpack的vue-loader可以方便的實現模塊化開發，.vue文件在打包的時候會被編譯成為一個js對象，里面包含一個render方法，用于渲染頁面，下面是App.vue文件

可以看到頁面包含三個部分template 、script 、style，其中template為組件使用的模板，現在vue2除了使用template，還可以使用JSX和js模板，但是相對其他兩種，template對于前端開發者來說還是比較直觀的，script為組件的邏輯部分，使用es6的進行模塊化，構建的時候會使用Vue.extend生成一個組件，style為頁面的樣式部分，可以指定lang來聲明使用的樣式語法類型，可以用原生的css，也可以用stylus，sass等等，只要配置不同的webpack loader進行進行編譯就行了，另外可以指定 scoped,使得組件中的樣式只對組件生效，不會影響其他組件，不用擔心命名重復的問題，其原理是在生成的時候為標簽生成一段隨機數(沒研究過生成數的算法)，并且為選擇器加上對應隨機數的屬性選擇器。
可以看到組件import另外一個List.vue組件，并且在components中進行了引用，template中進行了引用，這就實現了組件的嵌套和復用，下面是List.vue文件

這個文件使用了vuex管理的數據，在此前的版本的vuex中，在組件使用數據需要寫很多的computed,methods,在新版本的可以配合ES6的展開函數和vuex的helper，簡寫很多函數，組件部分內容就說到這里了，可能有人會說啥是computed，啥是methods，這些通通自己看文檔，
總的來說，寫一個組件需要了解下面幾點:

模板指令，例如v-for，v-bind,v-on等
數據使用配置屬性data,computed,props，watch等
組件的生命周期屬性created,mounted等
全局方法Vue.set,Vue.nextTick等
進階開發: 動畫效果，自定義指令，自定義插件，混合組件開發

下面說下用vuex做狀態管理，下面是store/index.js文件

可以看到使用vuex需要在Vue.use中引入，然后實例化一個Vuex.Store對象就可以了,對象中需要定義state,actions,mutations,getters等內容，這樣子就可以建立一個全局的狀態管理機制，可以從應用的頂端去處理數據，各個組件中對數據進行操作也是通過事件直接傳遞到Vuex中進行數據更新，然后再進行響應到其他使用同個數據的組件中，進行視圖更新。
項目的邏輯代碼已經完成了，但是對照上面ssr的概念，會發現還少了兩個webpack的entry point，一個是前端代碼的入口，可以是供服務端渲染的入口,下面是前端client-entry.js文件 

文件引入了app.js,判斷如果在服務端渲染時已經寫入狀態，則將vuex的狀態進行替換，使得服務端渲染的html和vuex管理的數據是同步的。然后將vue實例掛載到html指定的節點中。
下面是server-entry.js文件

這里面服務端會傳過來一個context對象，可以從獲取信息，也可以寫入信息，可以看到將現有的vuex state賦值給context，給服務端渲染使用，最后返回vue對象(文檔中寫著需要返回一個Promise對象，對象中再返回一個vue對象，經過實驗直接返回也是可以的，如果應用中存在異步操作會影響視圖和vuex數據狀態，那么應該返回一個Promise對象，使得服務端得到的vue對象是最后數據和視圖同步統一的)
代碼擼完了，下面要讓他跑起來了，配置分為兩部分，一個是webpack打包的配置，一個是服務端渲染服務器的搭建，這里使用express進行服務器的簡單搭建，不涉及任何負載均衡和性能優化問題，下面分別說說這兩個部分 :

webpack打包：webpack打包主要有三個文件webpack.base.config.js,webpack.client.config.js,webpack.server.cofnig.js,其中base主要配置了對應文件類型的loader，還有指定了entry的切割點，將業務代碼和庫，client指定了client-entry.js作為entry point ，還將庫文件和業務文件進行分別打包，還有一些圖片處理，代碼壓縮的工作。server指定了server-entry.js作為entry point,并且指定了打包了類型標準是commonjs2，供服務端渲染模塊使用。
而在開發過程中，可以使用webpack-hot-middleware/client,webpack-hot-middleware去實現代碼的watch和重新構建雙端的代碼的流程，是得開發更加便捷，具體配置在setup-dev-server.js中
最后說一下服務端渲染的服務器配置，服務端部分使用vue-server-renderer模塊的createBundleRenderer通過傳入剛才webpack生成的server-bundler去生成一個bundleRenderer,就可以調用renderToStream或者renderToString渲染頁面了，具體配置在server.js中

具體怎么跑起項目可以看下package.json的scripts屬性，其中dev是開發用，start是正式環境動態生成頁面用，build可以直接生成client-bundler和server-bundler
基本上比較完整的vue2 前段端同構渲染已經介紹完了，下面說下我對框架的看法，前端框架這個東西基本上就是一時火一個，我們在學習新東西的同時也應該不忘老本，要有自己的技術棧和工作流，就像《人月神話》中的一句話說的好，沒有解決任何事情的銀彈，對于不同的項目，不同的業務情景，應該采取不同的框架，使用最合適的開發架構去開發。
附上代碼 點我點我，給個star唄~

最后也沒啥好說的了，要不給大家拜個早年吧，祝大家代碼沒bug，哈哈