Skip to content

2.说一下响应式数据的理解

核心答案

1. Object.defineProperty

对象通过defineReactive方法,使用Object.defineProperty,将属性进行劫持。 整体流程是这样的:

  1. 创建渲染 Watcher,初始时执行渲染函数
  2. 执行过程中,触发了 getter,开始收集依赖
  3. 修改 data,触发 setter, 通知渲染 Watcher 更新视图

2. 观察者模式

响应式系统使用了观察者模式,观察者模式主要有两个角色,一是主题, 二是观察者。主题会收集、删除、通知观察者, 而观察者会订阅主题。响应式系统中,Observer和Dep就扮演了主题的角色,Watcher是观察者

每个对象都有一个Observer对象,每个属性都有一个Dep对象,Dep对象中收集着Watcher

补充答案:

暂无

扩展回答

在 Vue 2 的实现中,在组件初始化阶段把数据变成响应式时,遇到子属性仍然是对象的情况,会递归执行 Object.defineProperty 定义子对象的响应式;而在 Vue 3 的实现中,只有在对象属性被访问的时候才会判断子属性的类型来决定要不要递归执行 reactive,在性能上会有一定的提升。