Vue 进阶面试题, 什么是双向绑定?Vue 双向绑定的原理是什么?

Step 1

Q:: 什么是双向绑定？

A:: 双向绑定是指数据模型与视图之间的自动同步。在 Vue 中，双向绑定通常通过 v-model 指令实现。当模型的数据发生变化时，视图会自动更新；同样，当视图中的数据发生变化时，模型也会自动更新。

Step 2

Q:: Vue 双向绑定的原理是什么？

A:: Vue 的双向绑定主要依赖于数据劫持（Data Hijacking）和发布-订阅模式。Vue 通过 Object.defineProperty() 为数据对象的每个属性添加 getter 和 setter。当数据发生变化时，setter 会通知订阅者（视图）进行更新，从而实现数据和视图的双向绑定。在 Vue 3 中，Vue 使用 Proxy 代替了 Object.defineProperty()，使得双向绑定更加高效。

Step 3

Q:: 如何手动实现 Vue 中的双向绑定？

A:: 要手动实现 Vue 的双向绑定，可以使用 Object.defineProperty() 为数据对象的属性设置 getter 和 setter，拦截数据的读取和修改操作，并在修改时通知相关视图更新。例如，可以监听表单的 input 事件，并在触发时手动更新数据模型。

Step 4

Q:: Vue3 中双向绑定与 Vue2 的差异是什么？

A:: Vue3 中，Vue 使用 Proxy 来替代 Vue2 中的 Object.defineProperty() 进行数据劫持。Proxy 不仅可以拦截对象的属性访问，还可以监听数组的变化、对象新增属性等操作，使得双向绑定更加灵活和高效。此外，Vue3 中推荐使用组合式 API（Composition API），通过 ref 和 reactive 等方法实现数据响应式。