Vue學習心得之理解原理篇

寫這篇文章的初衷是想總結本身的學習經驗，但願對看到的人有所幫助，若有錯誤，請您指出，以避免誤人子弟，十分感謝！

---

如今前端比較流行的框架有 Vue、React、Angular三種。我的比較看好Vue，性能強大，並且可學性很強，比較適合新手學習。

首先vue是一款輕量級的MVVM框架，壓縮完以後只有20k+,這個是對比angular、react的明顯優點，並且學習曲線平滑，不用像學react同樣，還要學習react全家桶套餐。也不用像學習angular同樣，要記不少概念，angular的開發思惟很像後臺的開發思惟（例：依賴注入），也不適合前端小白。Vue還結合了angular的指令跟react的組件化思想，以上大概介紹了vue的優點，想了解vue對比其餘框架的細節，能夠去官網上查看https://cn.vuejs.org/v2/guide...。

Vue的核心思想是數據驅動（DOM是數據的一種天然映射），怎麼理解尼？若是不用vue，那麼像咱們從後臺接口獲取數據的時候，須要手動的去修改DOM來觸發視圖的變化，或者前端交互須要改變數據的時候，同樣須要手動去操做DOM，這樣作不只繁瑣並且很是容易出錯！用了vue就省去了去手動操做DOM的步驟，你只須要去修改數據，Vue會自動去觸發Dom的改變，Vue會經過VM層中的Directives去對Dom作一層封裝，當數據發生變化時，會通知指令去觸發對應DOM的變化。數據驅動DOM的變化，DOM是數據的一種天然映射這句話是否是就懂了一些！Vue還會對視圖（View）去作一些監聽，當咱們修改視圖的時候，vue會經過VM層中的DOM Listeners監聽到視圖的變化，進而通知數據（Model）改變。這就造成了數據的雙向綁定。具體看下圖：

那麼Vue是怎麼作到的尼？數據相應原理（ 數據（Model）改變如何驅動視圖（view）自動更新 ）？

其實監聽到DOM的變化相對簡單，經過監聽綁定的事件就能夠實現。關鍵在於如何獲取到數據的變化，這就用到了ES5的Object.definePrototype屬性，這也是Vue不支持IE6-IE8的緣由。(ps:具體怎麼驅動改變在本章就不介紹了，後續會寫一篇專門的文章來介紹)

Vue的另外一個核心思想是組件化，目的是拓展HTML元素，封裝一些可重用的代碼。那麼什麼是組件，怎麼寫組件？我在剛學習的時候就有這個疑問，其實跟react同樣，整個頁面任何一個獨立的可視/可交互區域都是一個組件，它們能夠相互嵌套。每個組件在建立的時候都會生成一個viewModel樹（相似DOM樹），它與DOM樹是一一對應的關係，這個相似DOM的樹就是虛擬DOM（vDOM）。

提到vDOM就不得不提vDOM的diff算法原理，本章簡單提一嘴，vDOM的節點爲虛擬節點（vNODE），Vue即僅在同級的vnode間作diff，遞歸地進行同級vnode的diff，最終實現整個DOM樹的更新（ps:後續會寫一篇專門關於diff算法的理解文章）

本章主要介紹了VUE的原理和優點，下一章將介紹怎麼開始一個作一個VUE項目 而且分享我在開發學習時候疑問，以及一些問題的解決方案