前端vue的面试题（一）

1、MVC和MVVM区别？2、为什么data是一个函数？3、Vue组件通讯有哪几种方式？4、Vue生命周期方法有哪些，一般在哪一步请求？5、v-if和v-show的区别？6、怎么理解vue的单向数据流？7、computed和watch的区别和运用场景？v-if 与 v-for 为什么不建议一起使用？ Vue.js 是一款流行的前端框架，它的设计理念和特性在面试中经常被问及。本文将针对提供的面试题目，详细解析相关知识点。 1. **MVC 和 MVVM 区别** MVC（Model-View-Controller）是一种传统的软件架构模式，强调模型、视图和控制器之间的分离。模型处理数据逻辑，视图负责显示，而控制器协调两者。MVVM（Model-View-ViewModel）是 MVC 的现代演变，主要在前端应用中广泛使用。ViewModel 是 MVVM 的核心，它实现了数据和视图的双向绑定，使得数据变化会自动反映在视图上，反之亦然。Vue.js 使用了类似MVVM的模式，但并不完全遵循，因为它允许 Model 直接操作 View（如通过 $refs）。 2. **为什么 data 是一个函数** 在 Vue 组件中，data 必须是一个函数，而不是一个对象。这是因为每个组件实例都需要有自己的独立数据空间，避免数据共享导致的意外修改。函数形式确保每次创建组件实例时，data 都会返回一个新的对象，保证组件实例间的数据隔离。 3. **Vue 组件通讯方式** - **Props**：父组件通过 props 向子组件传递数据。 - **$emit**：子组件通过触发自定义事件向父组件传递数据。 - **$parent/$children**：获取当前组件的父组件或子组件实例。 - **$refs**：直接引用子组件实例，以便进行直接操作。 - **Event Bus**：通过全局事件总线实现兄弟组件间通信。 - **Vuex**：状态管理库，集中管理应用状态，适用于复杂项目。 4. **Vue 生命周期方法** - **beforeCreate**：实例初始化后，数据观测和事件配置前。 - **created**：实例创建完成后，可以访问数据和方法，但此时未挂载到 Dom。 - **beforeMount**：挂载开始前，render 函数首次被调用。 - **mounted**：挂载完成后，可以访问和操作 Dom。 - **beforeUpdate**：数据更新但渲染前，可以在此做进一步的数据调整。 - **updated**：更新完成后，Dom 已更新，避免在此处修改数据。 - **beforeDestroy/destroyed**：实例销毁前/后，用于清理资源。 - **activated/deactivated**：keep-alive 组件的激活和停用状态。 异步请求一般在 created、beforeMount 或 mounted 钩子中发起，根据是否依赖 Dom 和数据需求选择合适时机。 5. **v-if 和 v-show 的区别** - **v-if**：条件判断，若条件为假，不会生成 Dom 结构，更节省性能，适合条件频繁切换。 - **v-show**：同样做条件判断，但无论条件真假都会生成 Dom，只是通过 CSS 控制显示隐藏，适合初次渲染较快，之后频繁切换的情况。 6. **理解 vue 的单向数据流** Vue 实现了单向数据流，即数据只能沿着一个方向流动，通常是从父组件到子组件。这意味着子组件不能直接修改父组件的属性，而是通过事件通知父组件来更新数据，保持数据流的清晰和可预测性，有利于代码管理和调试。 7. **computed 和 watch 的区别和应用场景** - **computed**：计算属性，基于依赖缓存结果，只有当依赖变更时才会重新计算。适合计算逻辑简单且不频繁的情况。 - **watch**：观察者，可以监听某个数据的变化并执行回调。当需要在数据变化时执行复杂逻辑或异步操作时，应使用 watch。 8. **v-if 与 v-for 为什么不建议一起使用** v-if 和 v-for 都是指令，同时使用可能导致额外的性能开销，因为它们都尝试创建和销毁元素。如果需要有条件地渲染列表项，通常推荐使用计算属性先过滤列表，然后再使用 v-for 渲染处理后的列表。 了解这些基本概念和机制对于深入理解和使用 Vue.js 非常关键，同时也是面试中常见的考察点。熟练掌握这些知识能够帮助开发者写出更高效、可维护的 Vue 应用。