代码视界

Hanpeng Chen的个人博客

【面试题】说一说你对Vue2 响应式原理的理解?

前言

虽然Vue3已经正式发布,但目前Vue2还是开发主力,所以近期面试Vue2相关内容还是比较常见的,今天我们一起来看看下面这个问题:

面试题

面试官:说一说你对Vue2 响应式原理的理解?

无法让面试官满意的回答

碰到面试官问你这个问题,你可能会做如下回答:

Vue是非侵入性的响应式系统,遍历对象并使用Object.defineProperty对对象的属性进行数据劫持,当数据发生变化时,触发数据劫持的setter函数,通知组件实例的watcher需要进行视图更新,以此来实现响应式。

上面的答案虽然提到 Object.defineProperty 这一关键点,但并不能让面试官满意,因为有一些关键的细节并没有回答出来,比如:Vue是在什么时候进行数据劫持?又是如何实现在数据更新时通知视图更新的?

让面试官满意的回答

下面我们一起来过一下Vue2 的响应式流程:

  • init数据初始化的时候,对象内部通过 defineReactive 方法,使用 Object.defineProperty 将属性进行劫持(这时候只会劫持已经存在的属性)。如果数据是数组类型, Vue2中是通过重写数组方法来实现。多层对象是通过递归来实现劫持的。

  • 在初始化流程中的编译阶段,当render function 被渲染的时候,会读取Vue实例中和视图相关的响应式数据,此时会触发 getter 函数进行 依赖收集(将观察者Watcher对象存放到当前闭包的订阅者Depsubs中),此时的数据劫持功能和观察者模式就实现了一个MVVM模式中的Binder,之后就是正常的渲染和更新流程。

  • 当数据发生变化或者视图导致的数据发生变化时,会触发数据劫持的setter函数,setter会通知初始化依赖收集中的Dep中和视图相应的 Watcher ,告知需要重新渲染视图,Watcher 就会再次通过 update 方法来更新视图。

上面的回答基本将Vue2的响应式原理说清楚了,虽然还有一些细节的内容没说,但如果你们清晰的将上面三个流程说出来,面试官就能知道你已经理解了Vue2的响应式原理,面试评分自然不会低。

因为Vue3已经发布,所以在这个基础上,面试官可能还会问:Vue3 在响应式原理上都做了哪些优化方案?这个问题我们后续在做解答。

感谢读完这篇文章,如果感觉写得还可以的话,关注公众号,点个赞,我们一起学习、准备面试。

欢迎关注微信公众号: 『前端极客技术』『代码视界』
支付宝打赏 微信打赏

赞赏是不耍流氓的鼓励