三大框架之vue.js

前言

       若是把vue比做某樣東西，那我會把它比做多細胞生物體，由於多細胞生物具備必定的層次結構，而vue也具備特定的結構，懷着小V虐我千百遍我待小V如初戀的心態，咱們試着將vue分解開來，看看裏面到底有什麼！

vue的核心要素：一、數據驅動（概念）    二、組件式編程（思想）

1、數據驅動：

一、Vue.js數據觀測原理在技術實現上，利用的是ES5Object.defineProperty和儲存器屬性：getter個setter（因此只兼容ie9及以上版本），可稱爲基於依賴收集的觀測機制。核心是vm，即ViweModel，保證數據和視圖的一致性。

二、watcher：每個指令都會有一個對應的用來觀測數據的對象，叫作watcher，好比v-text='msg'，{{msg}}，即爲兩個watcher，watcher對象中包含了待渲染的關聯DOM元素。

三、基於依賴收集的觀測機制原理

•  將原生的數據改形成'可觀察對象'，一般爲調用defineProperty改變data對象中數據爲存   儲器屬性，一個可觀察對象能夠被取值getter，也能夠被賦值setter。
  
•  在解析模板，也就是watcher的求值過程當中，每個被取值的可觀察對象都會將當前的   watcher註冊爲本身的一個訂閱者，併成爲當前watcher的一個依賴。
  
•  當一個被依賴的可觀察對象被賦值時，它會通知notify全部訂閱本身的watcher從新求   值，並觸發相應的更新，即watcher對象中關聯的DOM改變渲染。
  
•  優勢：依賴收集的優勢在於能夠精確、主動的追蹤數據的變化，不須要手動觸發或對做用   域中全部watcher都求值（angulpushar髒檢查實現方式的缺點），特殊的是，對於數 組，須要經過包裹數組的可變方法（好比push）來監聽數組的變化，在添加/刪除屬性，   或是修改數組特定位置元素時，也須要調用特定的函數，如obj.$add( key,value )才能出   發更新，這是es5的語言特性所限。

2、組件式編程（思想）：

一、組件的核心（思想）

• 模板（template）：模板聲明瞭數據和最終展示給用戶的DOM之間的映射關係
  
• 初始數據（data）：一個組件的初始數據狀態。對於可複用的組件來講，這一般是私有狀態
• 接收的外部參數（props）：組件之間用過參數來進行數據的傳遞和共享
• 方法（methods）：對數據的改動操做通常都在組件的方法內進行
• 聲明週期鉤子函數（lifecycle hooks）：一個組件會出發多個生命週期鉤子函數，最新2.0版本對於生命週期名稱改動很大
• 私有資源（assets）：vue.js當中將用戶自定義的指令、過利器、組件等統稱爲資源。一個組件能夠聲明本身的私有資源，私有資源只有改組件和它的子組件能夠調用
  

二、聲明週期

• beforeCreate：組件實例剛剛被建立，組件屬性計算以前，如data屬性實例化以前（el和data並未初始化。el：undefined；data：undefined；message：undefined）
• created：組件實例化完成，屬性已經綁定，但DOM還沒生成，$el屬性不存在（完成了data數據的初始化，可是el沒有。el：undefined；data：[Object][Object]；message：'數據'）
• beforeMount：模板編譯/掛載以前（完成了el和data的初始化。el：p>{{message}}<p/>；data：[Object][Object]；message：'數據'）
• mounted：模板編譯/掛載以後（完成了掛載。el：p>數據<p/>；data：[Object][Object]；message：'數據'）
• methods：定義事件（爲其可讀性，建議全部事件都綁定在methods(){}裏面，根據業務不一樣，動態的在各個鉤子內部調用）
• beforeUpdate：組件更新以前，此時模板會被從新編譯（mounted輸出新的數據）
• updated：組件更新以後
• activated：組件被激活時調用
• deactivated：組件被移除時調用
• beforeDestroy：組件銷燬前調用
• destroyed：組件銷燬後調用

* 生命週期總結：①beforecreated：能夠在這裏加loading開始

                        ②created：在這裏結束loading，還能夠作一些初始化，實現函數自執行

                        ③mounted：在這裏發起後端請求，拿回數據，配合路由鉤子作一些事情

                        ④beforeDestroy：你確認要刪除XX嗎？

                        ⑤destroyed：當前組件已被刪除

                        

三、vue指令

• v-for：循環
• v-show：顯示與隱藏（display：none/block）
• v-if：現實與隱藏（根據表達式的值動態選擇是否掛載DOM樹）
• v-class：動態綁定元素的class
• ：class="[num?'red':'green']"
• v-style與上相似

四、數據偵聽

• computed：我的以爲computed更適合作過濾器，監聽一個數據的變化，根據應用邏輯                        返回新的數據，這也是過濾器的本質，可利用閉包擴展
• watch        ：爲了發現對象內部值的變化，能夠在選項參數中指定deep：true，注意監                         聽數組變化的時候不須要這麼作

   *  computed/watch/methods的區別：

• computed爲響應式運算（只關心運算結果）
  
• watch爲監聽動做（可拿到新值和舊值去處理一些特有邏輯）
• methods是更爲純粹的手動定義的方法（更便捷的擴展了開發者本身的思惟）
  

五、vue-router  

概念：路由（就是指向的意思）

• route  ：它是一條路由，home按鈕=>home內容    about按鈕=>about內容
  
• routes：它是一組路由，把上面每一天路由結合起來，就造成了一個數組
  

                    [{home按鈕=>home內容}，{about按鈕=>about內容}]  

• router ：router是一個機制，至關於一個管理者，它負責管理路由，由於routes只是定義了一組路由，它放在那裏是靜態的，當真正來了請求，怎麼辦？就是當用戶點擊home按鈕的時候，這是router就起做用了，它會到routes中去查找，去找對應的home內容，因此頁面中就會顯示home內容
  

 

總結：vue.js學習曲線很是平穩，主要是文檔實在太優秀了，旁證了設計師出身的程序員多可怕，其輕量、高性能的特色，對於移動場景也有很好的契合，更重要的是，設計完備的組件系統和配套的構建工具、插件，使得vue.js在保留了其簡潔API的同時，也已經徹底有能力擔當起復雜的大型應用的開發。