面试问vue双向绑定原理究竟该如何回答?

如初
  • 68

求一份文字总结版的回答,如何能简洁且全面回答?
另外vue2和vue3的实现双向绑定有哪些区别?

回复
阅读 624
2 个回答
李十三
  • 13.3k

对一个数据进行代理,在使用这个数据的时候注册监听,在修改这个数据的时候触发监听

vue3使用 proxy,vue2使用的 Object.defineProperty对数据进行代理劫持
proxydefineProperty 更全面几乎覆盖所以数据使用场景

说实话“双向绑定”这个概念,在vue的文档中也并没有出现过具体的说明,所以我觉得扯就行了。
从渲染过程的收集依赖,到修改数据的通知更新,逃不开响应式数据,响应式数据你就扯访问拦截以及赋值拦截,vue2中通过definePropery设置getter和setter实现,vue3中通过proxy中handler对get行为和set行为的处理实现。收集依赖涉及到访问拦截,通过addDep啥的建立你依赖我,我记录你的关系。然后修改数据时涉及到赋值的同时,按照记录的关系通知,接到通知的那一边该干啥干啥,因为渲染watcher所以在数据修改时可以更新视图。
然后再反过来说,用户输入反馈到数据上,其实是vue内部隐藏了一些事件处理,典型的就是v-model指令的实现,拿input元素举例,不同的type可能是不同的事件,text 和 textarea 元素使用input事件,checkbox 和 radio 使用change事件之类之类的,通过内部指令系统,快速的建立一个监听器用于修改关联的数据,甚至还可以扯自定义指令有一个钩子叫bind,最能表达绑定的含义。
所以不用太纠结于具体怎么回答,使用的时候就有那种感觉,然后结合vue最关键的一些实现细节,把思路串联起来就行了。如果非要一个特别具体,特别标准的答案,从响应式数据下手,那张经典的图能用文字串讲下来,就是标准答案。尤其注意那几个动词,touch,collect,notify,trigger,完全足以。比如touch,可以解读为视图尝试与数据建立关系,响应式数据collect收到视图的请求并建立这个关系;数据变化是notify,trigger了视图的更新,这是数据往视图的方向。

宣传栏