【Vue基础】-双向绑定原理

147 阅读1分钟

这是一道面试中最常见的面试问题?如何回答呢

个人理解:

核心方法是js中的Object.defineProperty()方法,通过这个方法进行数据劫持并结合发布-订阅者模式来实现的。这个方法有三个参数,对象、对象的属性、属性描述符的集合对象(比如:是否可遍历、是否可写、get和set属性对应的getter和setter函数等)

因为这个方法是一对一的监听数据改变,执行效率低下,所以需要观察者模式来进行补充,即一对多。

说下发布订阅者模式,个人理解就是观察者模式的一个升级版,多了一个统一的管理机制。主要流程,如下:

image.png

图解:

在vue的data数据中,可以理解为是监听器observe,然后映射到视图层的dom中,dom层存在着订阅者watcher,只要observe监听到改变就会被watcher捕获到,从而发生视图的更新,而一旦watcher处理多个,就需要订阅器dep来实现watcher的统一管理,与此同时,最后一个解析器compile,即对每个元素的指令进行解析。

关于手撕双向绑定原理,这里不做记录,但这就是一个考点,面试官让你当场手写一个双向绑定的代码,你怎么应对?

可参考这个思路: www.bilibili.com/video/BV1oJ…