Appearance
2.说一下响应式数据的理解
核心答案
1. Object.defineProperty
对象通过defineReactive
方法,使用Object.defineProperty
,将属性进行劫持。 整体流程是这样的:
- 创建渲染 Watcher,初始时执行渲染函数
- 执行过程中,触发了 getter,开始收集依赖
- 修改 data,触发 setter, 通知渲染 Watcher 更新视图
2. 观察者模式
响应式系统使用了观察者模式,观察者模式主要有两个角色,一是主题
, 二是观察者
。主题会收集、删除、通知观察者, 而观察者会订阅主题。响应式系统中,Observer和Dep
就扮演了主题
的角色,Watcher
是观察者
每个对象都有一个Observer
对象,每个属性都有一个Dep
对象,Dep
对象中收集着Watcher
补充答案:
暂无
扩展回答
在 Vue 2 的实现中,在组件初始化阶段把数据变成响应式时,遇到子属性仍然是对象的情况,会递归执行 Object.defineProperty 定义子对象的响应式;而在 Vue 3 的实现中,只有在对象属性被访问的时候才会判断子属性的类型来决定要不要递归执行 reactive,在性能上会有一定的提升。