虛擬dom diff演算法

通過render函式解析jsx，將其轉換成 vdom結構

var vdom = ,
content: []}
]}

初次渲染 vdom( vdom渲染成真實dom )

render函式

資料更改了

data.name = '駿哥'
vdom = ,
content: []}
]}

使用diff演算法比對兩次vdom,生成patch物件

diff演算法是比較兩個檔案的差異，並將兩個檔案不同之處，將這個不同之處生成乙個補丁物件（patch） diff演算法**後端前端將其應用於虛擬dom的diff演算法 vue中將虛擬dom的diff演算法放在了 patch.js檔案中使用js來進行兩個物件的比較（ vdom 物件模型） diff演算法是同級比較

給每乙個層級打乙個標記，這個標記是乙個數字（這個數字就是 key ）

根據key將patch物件渲染到頁面中改變的結構上，而其他沒有改變的地方是不做任何修改的（虛擬dom的惰性原則）

diff演算法是什麼？

diff演算法執行結束之後，返回什麼？

注意： vue是一是mvvm框架，vue高效能的原因之一就是vdom

什麼是jsx?

6.key是幹什麼用的?

修改樣式

刪除

new vue(,]},

methods: ,

remove ( index ) }})

7.驗證 key

8.為什麼列表迴圈要加key ?

vue中列表迴圈需加:key=「唯一標識」唯一標識可以是item裡面id index等，因為vue元件高度復用增加key可以標識元件的唯一性，為了更好地區別各個元件 key的作用主要是為了高效的更新虛擬dom

為什麼要使用元件？

元件化

要想實現元件化，那麼我們使用的這一部分就必須是完整的，我們把這個完整的整體就稱之為元件

外掛程式： index.html img css js

如果能將 html css js img 等多個部分放在一起，那該有多好，vue將這個聚合體的檔案稱之為，單檔案元件（ xx.vue ）

2.基礎的元件建立

全域性註冊

ue.component('father',)
new vue(
}})

區域性註冊

在元件中用乙個components的配置專案來表示

只能在註冊的範圍內使用，其他地方是不能使用的

var hello = vue.extend()
new vue(
})new vue()

3.元件的巢狀

4.vue是如何擴充套件元件的

5.vue為什麼要以標籤的形式使用元件

6.元件使用為何要註冊

7.元件的一些特殊使用規則【 is 規則】

8.元件的template

template使用：

例項範圍內使用

template中的內容被當做乙個整體了，並且template標籤是不會解析到html結構中的

例項範圍外使用

例項範圍外template標籤是不會被直接解析的

元件要想使用template使用，我們採用第二種

但是使用第二種template使用後，有個弊端，template標籤結構會在html檔案中顯示

解決：使用webpack、gulp等工具編譯，將來要用vue提供的單檔案元件

vue.component('hello',)

new vue()

虛擬dom diff演算法

虛擬dom diff演算法

虛擬Dom diff演算法

虛擬dom diff演算法

相關推薦