- 核心思想:
当数据发生变化时,依赖该数据的代码能够自动重新执行
- Vue中的应用:
在data或ref/reactive中定义的数据,当数据变化时template会自动更新
- template的本质:
是render()函数, 用变化之后的数据重新执行render()函数, 形成新的VNode, 然后对比新旧的VNode,这就是diff算法的一个事情, 然后决定那个VNode需要做实际的dom更新操作
1. 响应式意味着什么?
-
基本示例:
javascript// 响应式原理:初始化一个num值,当num值发生变化时,依赖num的代码会自动重新执行,称之为响应式的 let num = 100; console.log(num * 2); console.log(num * num); num = 200
-
本质特征:
数据变化 → 依赖代码自动执行
2. 对象响应式
-
实际开发中更多处理对象响应式
javascript// 对象的响应式 const obj = { name: 'bar', age: 18 } // 当obj.name变化时,只重新执行依赖name的代码 console.log(obj.name); // 当obj.age变化时,只重新执行依赖age的代码 console.log(obj.age);
-
精准响应:
- 当obj.name变化时,只重新执行依赖name的代码
- 当obj.age变化时,只重新执行依赖age的代码
-
依赖收集:需要自动识别哪些代码依赖了对象的哪些属性
3. 响应式函数设计
-
函数封装:
- 将依赖代码封装成函数:
function foo(){console.log(obj.name)}
- 当数据变化时执行对应函数
- 将依赖代码封装成函数:
-
是否需要响应式:
- 需要响应式的函数:内部使用了响应式数据
- 不需要响应式的函数:完全独立于响应式数据
- Vue类比:类似于template最终转为render函数,数据变化时重新执行render
js// 对象的响应式 const obj = { name: 'bar', age: 18 } //当obj.name和obj.age发生改变的时候,重新执行foo()和bar() // 把所有依赖对象obj的代码封装起来, function foo () { // 响应式函数 console.log(obj.name); console.log(obj.age); } function bar () { // 响应式函数 console.log(obj.age + 100); } // 修改obj对象 obj.name = 'kobe' ```
- 核心机制:
- 建立数据与函数的依赖关系
- 数据变化时触发对应函数执行
- 实现要点:
- 自动收集依赖关系
- 精准触发更新(只触发真正依赖变化的函数)
- Vue原理:
- 通过
Proxy/Object.defineProperty
监听数据变化 - 建立
"数据属性-依赖函数"
的映射关系 - 变化时通过映射关系找到并执行对应函数
- 通过