VUE 双向数据绑定

Vue 的双向数据绑定是其核心特性之一，它允许视图（模板中的 HTML）和 JavaScript 应用程序状态之间保持同步。在 Vue 中，这通常是通过使用 v-model 指令来实现的，尽管在底层，Vue 实际上是通过发布-订阅模式（也称为观察者模式）来实现这一功能的。

v-model 的工作原理

v-model 是一个语法糖，它内部实际上做了几件事情来确保视图和数据的双向绑定：

1. 数据到视图的绑定：当 Vue 实例的数据变化时，Vue 会自动更新绑定到该数据的 DOM 元素。这是通过 Vue 的响应式系统实现的，该系统会在数据变化时通知视图进行更新。

2. 视图到数据的绑定：v-model 在表单输入元素（如 <input>, <select>, <textarea> 等）上使用时，会自动监听这些元素的输入事件（如 input 事件对于文本输入框），并在事件触发时更新 Vue 实例的数据。

在 Vue 2.2.0+ 中，v-model 在自定义组件上的用法被扩展了，允许组件接受一个 value 属性作为 prop 并发出一个 input 事件。这使得自定义组件可以像原生表单元素一样使用 v-model。