vue 面试题

什么是 Vue 的 MVVM 模式？它是如何工作的？
答案：MVVM 是 Model-View-ViewModel 的缩写。在 Vue 中，Model 表示数据模型，View 表示 UI 组件，ViewModel 是 Vue 的实例，它连接 View 和 Model。ViewModel 通过数据绑定将 View 和 Model 进行关联，当 Model 发生改变时，ViewModel 会自动更新 View，反之亦然。

Vue 中的 v-if 和 v-show 指令有什么区别？
答案：v-if 和 v-show 都可以根据条件控制元素的显示与隐藏。区别在于 v-if 是动态地创建或销毁元素，当条件为 false 时，元素将从 DOM 中移除；而 v-show 则是通过 CSS 控制元素的显示与隐藏，当条件为 false 时，元素仍然存在于 DOM 中，只是通过 CSS 的 display 属性进行控制。

Vue 中的路由是如何实现的？
答案：Vue 使用 Vue Router 来实现前端路由。Vue Router 是 Vue.js 官方的路由管理器，通过定义路由表和对应的组件，可以实现单页面应用的路由功能。Vue Router 使用了浏览器的 History API 或哈希模式来实现前端路由，并提供了丰富的导航守卫和动态路由等功能。

Vue 中的 computed 属性和 methods 方法有什么区别？
答案：computed 属性和 methods 方法都可以在 Vue 组件中定义计算属性或方法。区别在于 computed 属性是基于它的依赖进行缓存的，只有在依赖发生改变时才会重新计算，而 methods 方法在每次使用时都会重新执行。因此，如果一个属性的值依赖于其他多个属性，且需要进行缓存，应该使用 computed 属性；如果需要在模板中处理一些逻辑或触发事件，应该使用 methods 方法。

Vue 中的 key 属性有什么作用？
答案：key 属性主要用于 Vue 的列表渲染，它的作用是为每个节点设置唯一的标识符，用于优化列表的更新。当列表中的项发生变化时，Vue 会根据 key 属性判断哪些项是新增的、删除的或移动的，从而最小化 DOM 操作，提高性能。在使用带有状态的列表时，使用 key 属性是一个很好的实践。