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