v-model 双向绑定的原理是什么？

v-model 是 Vue.js 中的一个重要指令，它实现了数据和表单元素之间的双向绑定。简单来说，双向绑定就是数据改变会影响视图，视图改变也会影响数据。

v-model 的双向绑定原理主要基于以下两个部分：

1. 数据到视图的绑定：这一部分主要通过 Vue 的响应式系统完成。当我们在组件的 data 中定义一个变量，例如 message，Vue 会使用 Object.defineProperty() 方法将它转换为 getter/setter。当我们在模板中使用 {{message}} 或 v-model="message" 时，Vue 会将当前组件添加到 message 的依赖中。当 message 发生变化时，Vue 会通知所有依赖 message 的组件重新渲染，从而更新视图。

2. 视图到数据的绑定：这部分主要通过监听 DOM 事件完成。对于 <input> 元素，v-model 指令会监听 input 事件。当用户在输入框中输入内容时，触发 input 事件，然后 v-model 指令的事件处理函数会把新的值赋给 message，从而更新数据。

所以，v-model="message" 相当于 v-bind:value="message" 和 v-on:input="message = $event.target.value" 的语法糖。

这种双向绑定机制使得我们在处理表单元素时更加简单，只需要操作数据，不需要直接操作 DOM，提高了开发效率。

核心代码

<input type="text" :value="msg" @input="msg = $event.target.value"/>