Vue必會知識點 原理篇

2021-10-23 12:58:24 字數 2388 閱讀 2633

響應式的原理:

偵測資料的變化,收集檢視依賴了哪些資料,資料變化時,自動「通知」需要更新的檢視部分,並進行更新。三個步驟對應的專業術語就是:資料劫持 / 資料**,依賴收集,發布訂閱模式。

網上的vue響應式詳解

資料劫持的核心api:object.defineproperty:

vue3改用的proxy

object.defineproperty實現資料劫持**:

let data =

, arr:[1

,2,3

,4,5

]}//重新定義陣列原型

// object.create()會建立新物件,原型指向array.prototype,再擴充套件新的方法不會影響原型

const arrproto = object.

create

(array.prototype)

let methods =

['pop'

,'shift'

,'unshift'

,'sort'

,'reverse'

,'splice'

,'push'

] methods.

foreach

(item =>})

//監聽data物件屬性(使物件變成可觀察的)

function

observer

(obj)

//如果是陣列,那就修改原型的指向

if(array.

isarray

(obj)

) object.

keys

(obj)

.foreach

(key =>)}

//定義屬性的getter/setter

function

definereactive

(obj, key, value)

,set

(newvalue)}}

)}//觸發更新檢視

function

updateview()

//使用

observer

(data)

data.arr.

push

(100

) console.

log(data.arr)

proxy實現資料劫持**:

//使用proxy實現資料劫持

let data =

, arr:[1

,2,3

]}//觸發更新檢視

function

updateview()

//**函式

let handler =

return reflect.

get(target, key)},

set(target, key, value)

}//使用proxy**資料

let proxy =

newproxy

(data, handler)

proxy.age.name =

'浪裡行舟'

// 支援新增屬性

console.

log(proxy.age.name)

// 模擬檢視的更新 浪裡行舟

proxy.arr[0]

='浪裡行舟'

//支援陣列的內容發生變化

console.

log(proxy.arr)

// 模擬檢視的更新 ['浪裡行舟', 2, 3 ]

proxy.arr.length--

// 無效

vdom出現的原因和原理:

dom的操作比較耗費效能,js的執行速度很快,所以可以用js模擬dom結構(vdom),計算出最小的變更(diff演算法),再操作dom。

數diff的時間複雜度是o(n^3),因為要先遍歷兩棵樹,然後還要排序,1000個節點就需要計算1億次,演算法是不可用的。所以大牛們把vdom的diff演算法優化到o(n)了。

vdom的diff演算法優化方案:

面試不會直接問,但會通過『元件渲染和更新過程』考察

vue模板被編譯成什麼?

更新過程

非同步渲染

hash:

h5 history:

兩者選擇:

iOS知識原理篇

weak策略表明該屬性定義了一種 非擁有關係 nonowning relationship 為這種屬性設定新值時,設定方法既不保留新值,也不釋放舊值。此特質同assign類似 然而在屬性所指的物件遭到摧毀時,屬性值也會清空 nil out runtime對註冊的類,會進行布局,會將 weak 物件放...

c 必會知識點

關於記憶體的分配,首先應該了解分配在 的問題,clr管理記憶體的區域,主要有三塊 分別為 1.執行緒的堆疊 用於分配值型別例項.堆疊主要由作業系統管理,而不受垃圾 器 gc 的控制 當值型別例項所在方法結束時,其記憶體空間自動釋放,棧的執行效率高,但儲存容量有限 2.gc堆,用於分配小物件例項.如果...

Vue知識點總結(VUEX篇)

vuex 是什麼?運用到了js設計模式中的單例模式,單例模式想要做到的是,不管我們嘗試去建立多少次,它都只給你返回第一次所建立的那唯一的乙個例項。vuex 使用單一狀態樹,用乙個物件就包含了全部的應用層級狀態。至此它便作為乙個 唯一資料來源 ssot 而存在。這也意味著,每個應用將僅僅包含乙個 st...