前端面试vue

### Vue 面试常见问题及答案 #### 1. Vue 中常见的指令及其用法 Vue 提供了许多内置指令来操作 DOM 和绑定数据。以下是几个常用的指令以及它们的用途： - **`v-bind`**: 动态地绑定一个或多个属性，或者一个组件 prop 到表达式[^1]。 ```html <!-- 绑定 class --> <div v-bind:class="{ active: isActive }"></div> <!-- 绑定 href 属性 --> <a :href="url">Link</a> ``` - **`v-if/v-else/v-else-if`**: 条件渲染，用于根据条件决定是否渲染某个元素。 ```html <div v-if="condition">True</div> <div v-else>False</div> ``` - **`v-for`**: 渲染列表项，基于数组或对象生成动态内容。 ```html <ul> <li v-for="(item, index) in items" :key="index">{{ item }}</li> </ul> ``` - **`v-on`**: 绑定事件监听器到指定方法上。 ```javascript <button v-on:click="handleClick">Click Me</button> ``` - **`v-model`**: 双向数据绑定，在表单输入和应用状态之间创建连接。 ```html <input v-model="message"> <p>{{ message }}</p> ``` - **`v-show`**: 根据表达式的真假值显示/隐藏 HTML 元素。它通过 CSS 的 `display` 属性控制可见性。 --- #### 2. Vue 3 和 Vue 2 的主要区别是什么？ Vue 3 是 Vue.js 的重要升级版本，引入了一些新特性和改进。以下是两者的主要差异： - **Composition API vs Options API**: - Vue 2 使用的是 Options API，逻辑按照生命周期钩子分组，适合小型项目[^2]。 - Vue 3 引入了 Composition API，允许开发者更灵活地组织代码逻辑，尤其适用于复杂业务场景。 - **性能优化**: - Vue 3 对虚拟 DOM 进行了重构，提升了渲染速度并减少了内存占用。 - **Tree Shaking 支持**: - Vue 3 更好地支持按需加载功能模块，减少打包体积。 - **Fragment、Teleport 和新的响应式系统**: - Vue 3 新增 Fragment 支持多根节点组件；新增 Teleport 实现跨组件挂载；重写了响应式机制 (Proxy 替代 Object.defineProperty)。 --- #### 3. 如何注册全局组件和自定义指令？ 可以通过 Vue 构造函数的方法实现全局配置。例如： - 注册全局组件： ```javascript Vue.component('my-button', { data: () => ({ count: 0, }), template: '<button @click="count++">Clicked {{ count }} times.</button>', }); ``` - 注册全局指令： ```javascript Vue.directive('focus', { inserted(el) { el.focus(); }, }); ``` 上述方式在 Vue 2 中有效，而在 Vue 3 中需要通过 `app` 实例完成类似的设置[^3]。 --- #### 4. Vue 的响应式原理是什么？ Vue 的核心之一是其响应式系统。对于 Vue 2 而言，它是基于 ES5 的 `Object.defineProperty()` 方法实现的数据劫持技术，能够检测对象属性的变化并触发视图更新。然而该方法存在局限性（无法侦测新增属性），因此 Vue 3 升级为 Proxy 技术，提供了更强的兼容性和灵活性。 --- #### 5. 生命周期钩子有哪些？分别的作用是什么？ Vue 定义了一套完整的生命周期流程，涵盖了实例从初始化到销毁的过程。典型阶段如下所示： | 钩子名称 | 描述 | |------------------|----------------------------------------------------------------------| | `beforeCreate` | 实例刚被创建时调用，此时还未解析模板或挂载 DOM | | `created` | 数据观测已完成，可以访问 this 访问到所有的选项 | | `mounted` | 当前组件已经完全挂载至页面 | | `updated` | 数据变化引起重新渲染之后 | 更多细节可参阅官方文档说明。 --- ###