Vue 基础面试题, 什么是 Vue 的 v-model?有什么作用?

Step 1

Q:: 什么是 Vue 的 v-model？有什么作用？

A:: v-model 是 Vue.js 提供的一个语法糖，用于在表单元素或组件上创建双向数据绑定。它的作用是自动绑定表单元素的值到组件的数据属性，同时在表单元素值变化时更新数据属性。例如，在一个输入框中，使用 v-model 可以自动将用户输入的值绑定到组件的一个数据属性中。

Step 2

Q:: v-model 的原理是什么？

A:: v-model 的原理是 Vue.js 的双向数据绑定机制。Vue 使用一个称为数据劫持（Data Hijacking）的技术，通过 Object.defineProperty 方法来拦截对数据的读写操作，从而实现双向绑定。当 v-model 被用于表单元素时，它会自动为元素的 'value' 属性绑定数据，并监听 'input' 事件以更新数据。

Step 3

Q:: 如何在自定义组件中使用 v-model？

A:: 在自定义组件中使用 v-model 需要在组件中绑定 'value' 属性并监听 'input' 事件。例如，在组件中可以通过 props 接收父组件传入的 'value'，并在数据变化时通过 $emit('input', 新值) 向父组件传递更新后的数据，从而实现 v-model 的双向绑定。

Step 4

Q:: v-model 支持哪些类型的表单元素？

A:: v-model 支持 input、textarea、select、checkbox、radio 等常见的表单元素。对于不同类型的表单元素，v-model 的行为会有所不同。例如，在复选框（checkbox）中，v-model 会绑定到一个布尔值或数组，而在单选框（radio）中，它则绑定到单一的字符串或数字值。

Step 5

Q:: 在 v-model 中如何处理复合数据类型，如数组或对象？

A:: 在 v-model 中处理数组或对象时，可以将 v-model 绑定到数组或对象的属性。Vue.js 会自动处理数据类型的变化，但需要注意在深层嵌套的数据结构中，可能需要手动更新嵌套属性的引用以确保 Vue 能够检测到变化。