简单来说，双向绑定就是数据改变影响视图，视图改变也会影响数据。
Vue 的双向绑定主要通过 v-model 指令实现，v-model 的工作原理主要基于以下两个部分：
1.数据到视图的绑定
这一部分主要通过Vue的响应式系统完成。v-model 绑定的数据模型值会初始化到视图中的表单控件。Vue.js 通过 v-bind 机制将数据的当前值反映到控件上，例如 <input v-model="message"> 会将 message 的值显示在输入框中。
当你使用 v-model 将一个数据属性（例如 message）绑定到一个表单控件（例如 <input v-model="message">）时，Vue.js 会在初始化时将数据属性的值赋给表单控件的初始值。
Vue 会通过 v-bind 自动将数据模型的值同步到视图中的控件。这确保了表单控件的显示内容与数据模型的值一致。
2.视图到数据的绑定
这部分主要通过监听DOM事件完成。v-model 会在表单控件上监听特定的输入事件，例如 input 事件（对于文本输入框）或 change 事件（对于其他表单控件，如 <select>）。
当用户在表单控件中输入或选择内容时，这些事件会触发对应的事件处理函数，从而将用户输入的值更新到数据模型中。
事件处理函数会把表单控件的当前值写回到数据模型中。Vue.js 会自动处理这些更新操作，确保数据模型中的值与用户在视图中的操作保持一致。
3.简单示例
<input v-model="message" />
<p>The message is: {{ message }}</p>
- 数据到视图：如果
message数据属性的值是"Hello, World!"，<input>控件的值会被初始化为"Hello, World!"，并显示在视图中。 - 视图到数据：当用户在
<input>控件中输入新的内容时，例如"Hi there!"，message数据属性会被自动更新为"Hi there!"，并且p元素中的内容也会实时更新。
这种双向绑定机制使得我们在处理表单元素时更加简单，只需要操作数据，不需要直接操作DOM，提高了开发效率。
4.除了 v-model 的双向绑定方法
- 自定义事件：在子组件中，使用 $emit 触发自定义事件，将数据传递到父组件，实现双向绑定。例如，子组件修改数据并通过 $emit 更新父组件的状态。
- ref：使用 ref 可以直接访问 DOM 元素或子组件实例，通过访问这些引用可以实现自定义的双向数据绑定，尽管这不是 Vue 提供的原生双向绑定机制。
