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

Question

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

Answer 1

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

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

Answer 2

说实话“双向绑定”这个概念，在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了视图的更新，这是数据往视图的方向。