Vue面试精华：生命周期、props、模板语法与计算/监听属性详解

Vue.js 是一个流行的前端框架，主要用于构建用户界面和单页面应用（SPA）。在面试中，关于Vue的常见问题涉及其核心概念、生命周期管理和组件交互。以下是几个关键知识点的详细解释： 1. **生命周期钩子函数**: Vue的生命周期分为多个阶段，每个阶段都有相应的钩子函数，这些函数在组件的不同生命周期阶段被调用。以下是它们的执行顺序： - `beforeCreate`: 在实例创建之前运行，但还未挂载到DOM上。 - `created`: 实例已创建完成，但DOM还没有插入。 - `beforeMount`: 模板编译并插入到DOM中，但数据尚未绑定。 - `mounted`: 组件已挂载到DOM，数据已绑定，此时可以与DOM进行交互。 - `beforeUpdate`: 当数据发生变化，但DOM更新前调用，通常用于更新计算属性。 - `updated`: 数据更新且DOM已更新。 - `beforeDestroy`: 组件即将销毁，可以在此阶段执行清理工作。 - `destroyed`: 组件已完全卸载，实例已销毁。 2. **Props（属性）**: 在Vue组件中，`props`允许父组件向子组件传递数据。使用方式是在子组件的`props`选项中声明，例如： ```javascript props: { color: { type: String, required: true }, // 字符串类型，必需 age: { type: Number } // 数字类型，可选 } ``` 常见属性类型包括：String、Number、Boolean、Array、Object和Function。 3. **模板语法与指令**: Vue的模板语法简洁明了，使用双花括号`{{ }}`进行数据绑定，支持表达式。指令以`v-`开头，例如： - `v-if`: 条件渲染，根据表达式的真假决定是否渲染部分DOM。 - `v-for`: 循环遍历数组或对象，生成重复的元素。 - `v-bind` (简写为`:`): 绑定属性，如`v-bind:class="{ active: isActive }"`。 4. **计算属性与监听属性**: - **计算属性**: 对数据进行计算并返回结果，Vue会自动缓存计算结果，只有当依赖的数据发生变化时才会重新计算。如： ```javascript computed: { doubledData: { get() { return this.dataList.map(item => item * 2); } } } ``` - **监听属性**: 监听数据的变化，当数据更新时执行自定义的回调函数。如： ```javascript watch: { data(newVal, oldVal) { console.log(`数据从${oldVal}变成了${newVal}`); } } ``` 计算属性侧重于计算结果，而监听属性关注数据的实时变化。 这些知识点是Vue面试中的基础部分，理解并掌握它们有助于在面试中展示对框架深入的理解和实际应用能力。