Vue 的双向数据绑定是其核心特性之一,它允许视图(模板中的 HTML)和 JavaScript 应用程序状态之间保持同步。在 Vue 中,这通常是通过使用 v-model
指令来实现的,尽管在底层,Vue 实际上是通过发布-订阅模式(也称为观察者模式)来实现这一功能的。
v-model 的工作原理
v-model
是一个语法糖,它内部实际上做了几件事情来确保视图和数据的双向绑定:
-
数据到视图的绑定:当 Vue 实例的数据变化时,Vue 会自动更新绑定到该数据的 DOM 元素。这是通过 Vue 的响应式系统实现的,该系统会在数据变化时通知视图进行更新。
-
视图到数据的绑定:
v-model
在表单输入元素(如<input>
,<select>
,<textarea>
等)上使用时,会自动监听这些元素的输入事件(如input
事件对于文本输入框),并在事件触发时更新 Vue 实例的数据。
在 Vue 2.2.0+ 中,v-model
在自定义组件上的用法被扩展了,允许组件接受一个 value
属性作为 prop 并发出一个 input
事件。这使得自定义组件可以像原生表单元素一样使用 v-model
。