03 vue原始碼學習 響應式原理 物件和陣列

什麼是響應式原理：

意思就是在改變資料的時候，檢視會跟著更新。

object.

defineproperty
( 物件,
'設定什麼屬性名'
,  賦值觸發
get()
取值觸發
})

let o =
// 簡化後的版本
function
definereactive
(target, key, value, enumerable)
屬性`)
;// 額外
return value
},set
(newval)
屬性為: $`
);// 額外
value = newval
}})}let keys = object.
keys
(o)        keys.
foreach
(key =>
)<
/script>

let data =,,
,]}// 簡化後的資料響應函式
function
definereactive
(target, key, value, enumerable)
object.
defineproperty
(target, key,
屬性`)
;// 額外
return value
},set
(newval)
屬性為: $`
);// 額外
value = newval
}})}// 將物件 o 響應式化
function
reactify
(o)}
else}}
reactify
(data)
<
/script>

攔截陣列方法：

letarray_method=[
'push'
,'pop'
,'shift'
,'unshift'
,'reverse'
,'sort'
,'splice',]
;// 思路, 原型式繼承: 修改原型鏈的結構
let arr =
;// 繼承關係: arr -> array.prototype -> object.prototype -> ...
// 繼承關係: arr -> 改寫的方法 -> array.prototype -> object.prototype -> ...
let array_methods = object.
create
(array.prototype)
array_method
.foreach
(method =>})
arr.__proto__ = array_methods
<
/script>

let data =,,
,]};
// 除了遞迴還可以使用佇列 ( 深度優先轉換為廣度優先 )
letarray_method=[
'push'
,'pop'
,'shift'
,'unshift'
,'reverse'
,'sort'
,'splice',]
;let array_methods = object.
create
(array.prototype)
;array_method
.foreach
(method =>
let res = array.prototype[method].(
this
, arguments)
;// array.prototype[ method ].call( this, ...arguments ); // 模擬
return res;}}
);// 簡化後的版本
function
definereactive
(target, key, value, enumerable)
object.
defineproperty
(target, key,
屬性`)
;// 額外
return value;},
set(newval)
屬性為: $`
);// 額外
value = newval;}}
);}// 將物件 o 響應式化
function
reactify
(o)}
else}}
reactify
(data)
;<
/script>

學習 vue 原始碼 響應式原理

由於剛開始學習 vue 原始碼，而且水平有限，有理解或表述的不對的地方，還請不吝指教。vue 主要通過 watcher dep 和 observer 三個類來實現響應式檢視。另外還有乙個 scheduler 來進行排程，本次暫時不做討論。watcher 和 dep 是訂閱者和發布者的關係，每個 wa...

Vue 響應式原理 原始碼

整個函式結束，相當於初始化所有屬性和vue內建事件 如 emit 並且使所有屬性變為響應式。初始化所有option api 對其中的使用者自定義資料data 進行 observe 此函式用來新建乙個類observer的例項，類observer的constructor中用walk 函式進行遍歷每個屬性...

結合原始碼解析 vue響應式原理

vue響應式原理 在之前vue2.0中，vue的響應式原理主要是基於object.defineproperty進行資料劫持然後結合觀察者模式 發布訂閱模式 來實現資料的雙向繫結。function dep dep.prototype.notify function function sub x sub...