10道Vue经典面试题

Vue.js 是一款流行的前端框架，用于构建用户界面。在面试中，掌握Vue的基础知识和应用技术至关重要。以下是对10道Vue面试题的详细解答： 一、基础知识 1. Vue 组件的生命周期： Vue组件有多个阶段，从创建、挂载、更新到销毁。主要阶段包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。这些阶段允许开发者在特定时刻执行逻辑操作，如初始化数据、监听事件或清理资源。 2. Vue 中使用 props 的方法： Props是父组件向子组件传递数据的方式。在子组件中，通过props定义接收的属性名，然后在父组件中通过属性名传递值。例如： ```vue <!-- 父组件 --> <child-component :message="parentMessage"></child-component> <script> import ChildComponent from './ChildComponent.vue'; export default { components: { ChildComponent }, data() { return { parentMessage: 'Hello from parent' }; } }; </script> <!-- 子组件 --> <script> export default { props: ['message'] }; </script> ``` 3. Vue 中的计算属性与方法的区别： 计算属性是基于其他数据属性动态计算得出的属性，存储在Vue实例的`_computed`对象中。当依赖的属性变化时，计算属性会自动更新。而方法是可调用的函数，通常用于执行复杂逻辑。 4. Vue 中的路由是什么？ Vue Router是Vue.js的官方路由库，用于管理应用的路由。它允许在不同的视图之间导航，实现单页应用（SPA）的页面切换。 5. Vue 中实现数据双向绑定： Vue的数据双向绑定是通过`v-model`指令实现的，它将表单控件的值与数据模型关联起来。当控件值改变时，数据模型也会相应更新。 6. Vue 中的事件： Vue提供了事件处理机制，允许组件内部和外部触发及响应事件。使用`v-on`指令监听事件，`@`是其简写形式。例如： ```vue <button @click="handleClick">Click me</button> <script> export default { methods: { handleClick() { console.log('Button clicked'); } } }; </script> ``` 7. Vue 中使用过渡效果： Vue内置了过渡系统，可以使用`v-if`、`v-show`、`v-enter`、`v-leave-to`等指令配合CSS transition或动画库实现过渡效果。例如： ```vue <transition name="fade"> <p v-if="isShown">This is a fading paragraph.</p> </transition> <style scoped> .fade-enter-active, .fade-leave-active { transition: opacity 0.5s; } .fade-enter, .fade-leave-to { opacity: 0; } </style> ``` 二、应用技术 1. 计数器组件： ```vue <template> <div> <p>{{ count }}</p> <button @click="increment">+</button> <button @click="decrement">-</button> </div> </template> <script> export default { data() { return { count: 0 }; }, methods: { increment() { this.count++; }, decrement() { this.count--; } } }; </script> ``` 这个组件维护了一个`count`数据属性，通过`increment`和`decrement`方法更新。 2. 代码改错题： 初始代码缺少逗号分隔符，已修复： ```vue <template> <div> <h1>{{ message }}</h1> <button @click="showMessage"> Show Message </button> </div> </template> <script> export default { data() { return { message: 'Hello, World!' }; // 添加逗号 }, methods: { // 添加逗号 showMessage() { console.log(this.message); } } }; </script> ``` 3. 复杂购物网站组件设计： 使用Vue CLI创建项目。接着，安装并配置Vue Router和Vuex。创建三个组件：商品组件（Product）、购物车组件（Cart）和控制台组件（Console）。商品组件展示商品信息，通过事件或Vuex传递选中的商品至购物车。购物车组件显示已选商品，并允许用户修改数量。控制台组件显示购物车状态，如总价和数量。在Vuex中，创建一个`cart`模块，管理购物车的状态，包括商品列表和总价。使用Vue Router设置路由，实现页面间的跳转。使用SCSS预处理器编写样式，提高代码可维护性。