Vue的原理

Vue的原理

input和change事件的區別

• input觸發條件：輸入框字符發生變化
• change觸發條件：輸入框失去焦點
• v-model的原理
  • 本質上是語法糖
    • 屬性綁定和事件綁定
    • 默認事件是input
    • 可以使用lazy修飾符轉化change事件

<input type="text" v-model='uname'>
<input type="text" v-model.lazy='uname'>
<input type="text" :value='uname' @input='handle'>

---

- 雙向綁定原理：defineProperty

• set
• get
• Vue內部會把data中的數據通過defineProperty方法轉化爲set和get的監控方式
• 當data中的數據發生變化時，會觸發對應的set或者get
  • 修改屬性值的時候，觸發set方法
  • 訪問屬性值的時候，觸發get方法
• 監控數據變化的目的還是爲了更新頁面（僅僅更新數據變化對應的DOM節點：儘可能少的更新DOM）
• 完成上述要求需要底層虛擬DOM的支持
• 如何理解虛擬DOM？
• 虛擬DOM是對真實DOM的一種描述

VNODE 虛擬節點：描述了真實的DOM節點，本質上就是普通對象
{
	tagName: 'div'
	attrs: { class: "active", id: "info"}
	content: "hello"
}

• 虛擬DOM也會形成一個樹狀結構，描述了真實的DOM樹
• 如果數據發生變化，那麼就會觸發虛擬DOM數的對比（diff算法）
• 對比的結果是：有變化的虛擬節點的集合
• 上述虛擬節點需要轉化爲真實的DOM節點

var div = document.createElement(vnode.tagName)
div.setAttibute(key, value)
div.innerHTML = vnode.content

• 最終會把真實的節點更新到頁面

---

- 雙向數據綁定和虛擬DOM

• DOM的更新比較耗時
• 儘可能少的更新DOM節點
• 爲了實現上述需求，發明了虛擬DOM
• 虛擬DOM描述了真實DOM（虛擬DOM樹---真實DOM樹）
  • 虛擬DOM樹本質其實就是普通對象
• 當數據發生變化時，會對比變化前後的虛擬DOM樹（diff算法）
• 對比的結果：有變化的虛擬節點的集合
• 虛擬的節點需要轉化成真實DOM節點
• 把真實的DOM節點渲染到頁面