vue資料層思路 Vue實現元件化的基本思路

vue.js(以下簡稱vue)是時下流行的前端開發庫，一般搭配其外掛程式vue-router，vuex一起使用，行業中稱為vue全家桶。

vue使用了mvvm的理念，將表現層(dom)和資料層進行了分離，其基本思想是資料和dom的一體化，運算元據即可變更dom，表單互動亦可通過v-model指令改變資料，將前端開發者從dom、資料兩手抓的泥潭中解放出來。

但是，使用這種方法的代價還是明顯的，那就是vue本身，因為這對大多數開發者而言是乙個黑盒子。如果不能大概了解它做了哪些事情，那麼有的時候遇到一些問題還是很頭疼的。

本文關於vue實現元件化的基本思路，總結了一些其中發生的故事，希望對今後的開發學習有所幫助。

最基本的模型

vue2.0之後並沒有將dom和資料進行直接繫結，而是採用了vnode類，也就是常說的虛擬dom。虛擬dom其實並不神奇，它就是乙個js物件，描述了dom元素的一些特徵，但是它的屬性要比真實dom少得多，這就使得操作更加方便省時。

資料層位於vue例項中(以下簡稱vm)，該例項的渲染函式執行可得到vnode，然後vnode通過patch過程渲染成真實dom，真實dom又通過註冊事件改變vm，這就是乙個基本的模型。

vue例項的由來

那麼vm從何而來呢？考慮以下實際問題：

new vue(,

template: `

swamp `

// m.vue

i am m

export default * len(o))；而如果各個vnode擁有key屬性，vue會事先建立乙個[key]-[vnode]的雜湊表，依據ns的key去查表只需要o(1)時間，則diff演算法的時間複雜度為o(max)。如果查詢成功，就將找到的節點移動到os的前方，並將ns右移；

如果上述情況均不能成功，那就說明o序列中並沒有ns處的節點，只能建立乙個新的節點，把它插入os之前，並將ns右移。

上述迴圈進行直到os出現在oe之前或者ns出現在ne之前，此時如果oe仍然在os之前或者同一位置，說明原始序列中的這些元素要被刪除；如果ne仍然在ns之前或者同一位置，說明原始序列中的這些元素要被新新增，按情況執行對應的操作即可。

依據此演算法，上面例子中的情形可以圖示為：

以上就是最基本的vue從定義到元件化到生成dom的過程。