Vue學習筆記:Vue組件的核心概念(下)

1.雙向綁定和單向數據流：

• 本質上還是單向數據流
• 視圖<——>數據
• v-model：僅僅是一個簡寫，用更少代碼去實現功能。
• 自定義事件
• .sync 修飾符

2.虛擬DOM及KEY屬性作用

• jquery:

• vue:

• virtual dom

• 新舊DOM樹比較

同層級比較：

• 節點移動

• • 不帶Key移動

 

• • 帶Key移動

 

• 插入

• • 有KEY(性能高)

• 節點刪除新建

（算法因爲同層級策略，無法達到最優解）

3.如何觸發組件更新

數據驅動

任何修改DOM的行爲都是在作死！

 

數據來源(單向)

 

狀態data和屬性props

• 狀態是組件自身的數據
• 屬性是來自父組件數據
• 狀態改變未必會出發更新
• 屬性改變未必會出發更新

響應式更新原理

4.計算屬性和偵聽器

計算屬性：

可以在裏面寫些邏輯的屬性

好處：

• 減少模板中計算邏輯
• 數據緩存
• 依賴固定數據類型（響應式數據）

偵聽器

好處：

• 更加靈活，通用
• 可以執行任何邏輯，如函數節流，ajax異步獲取數據，甚至操作節點。

二者區別

• 計算屬性能做的，偵聽器都能做，反之則不行
• 能用計算屬性的儘量用它

5.生命週期的應用場景和函數式組件

生命週期

 創建階段分解

 

更新階段分解

 銷燬階段分解

函數式組件

• 申明：functional:true
• 無狀態，無實例，沒有this上下文，無生命週期
• 用途：臨時變量用來存儲重複計算

可以簡單的認爲他是一個方法，它的用法不同於計算屬性：

• 必須依賴響應式數據；
• 模板中需要依賴v-for，v-if
• 可能依賴全局數據

TempVar.js