Vue 进阶面试题, Vue 中 v-model 是如何实现的?
Vue 进阶面试题, Vue 中 v-model 是如何实现的?
QA
Step 1
Q:: Vue 中 v-model 是如何实现的？
A:: 在 Vue.js 中，v-model 是一个语法糖，用于实现双向绑定。它实际上是 :value 和 @input 的简写形式。具体来说，当你在一个表单控件上使用 v-model 时，Vue 会监听控件的输入事件并更新绑定的值。其实现原理主要是通过 Object.defineProperty 或 Proxy 来实现数据劫持，从而在数据发生变化时自动更新视图，而视图变化时也能自动更新数据。
Step 2
Q:: 如何自定义组件中的 v-model？
A:: 自定义组件中的 v-model 需要在组件内部定义 model 属性，来指定要绑定的 prop 和要监听的事件。默认情况下，v-model 会绑定组件的 value 属性，并监听 input 事件。你可以通过定义 model: { prop: 'checked', event: 'change' } 来定制绑定的属性和事件，这样在使用组件时，v-model 就会绑定到 checked 属性并监听 change 事件。
Step 3
Q:: v-model 如何处理复杂的输入组件？
A:: 对于复杂的输入组件，v-model 可以通过传递对象来进行绑定。例如，当需要绑定多个属性时，可以通过 v-model 绑定一个对象，然后在组件内部通过解构该对象来实现多重绑定。组件还可以手动触发事件来实现不同属性的双向绑定。
Step 4
Q:: 在 Vue 3 中，v-model 与 Vue 2 有何不同？
A:: 在 Vue 3 中，v-model 的使用方式有所变化。首先，支持多个 v-model 绑定，允许一个组件绑定多个数据。其次，事件名称从 input 改为了 update:modelValue，而绑定的属性则默认使用 modelValue，这使得命名更加明确和统一。