【Vue】响应式原理

改变name的值

2

el 模板

12

1

通知变化

new Vue()

Observer用于监听劫持所有data属性

moon22

View

更新视图

页面

Compile解析el模板中的指令

初始化

订阅数据变化，绑定更新函数

Dep

{{name}}{{age}}

sky22

【Vue】响应式原理图解

Watcherupdata()

data 数据

Object.defineProperty: notify -> 遍历 watcher -> updataname -> Dep对象 -> subs -> [watcher(sky)] -> 监听到改变，调用notify -> [watcher(moon)]age -> Dep对象 -> subs -> [watcher(22)]

(1:左边)      改变data中的值  （2:右边）

添加订阅者

页面变为