美团前端实习面试记录

weixin_51762789

已于 2025-03-22 13:24:27 修改

阅读量1k

点赞数 25

分类专栏：前端面试文章标签：前端面试 vue.js javascript css3

于 2025-02-11 21:18:48 首次发布

本文链接：https://blog.csdn.net/weixin_51762789/article/details/145578202

版权

前端面试专栏收录该内容

1 篇文章

订阅专栏

前半小时问了很多项目相关的问题，问得很详细，包括功能逻辑，实现细节，例如项目分页功能是前端还是后端实现的？数据过多时可以考虑怎么优化？等等

然后问了一些vue2、js、css的问题，如下：

（1）vuex有哪些组成部分，在实际项目中，有哪些使用场景？

vuex具有State、Getters、Mutations、Actions、Module等组成部分……在大型项目、多组件共享状态、状态逻辑复杂等场景下比较常用。

（2）v-for、v-if为什么不推荐放在一起使用？怎么解决？

v-for 的优先级高于 v-if。当它们出现在同一节点时，Vue 会先进行 v-for 循环，遍历数组中的每一项，然后对每一项再执行 v-if 指令判断是否渲染。这意味着即便某些元素根据 v-if 的条件不需要渲染，Vue 仍然会对其进行循环迭代，做了许多不必要的计算，降低了渲染效率。

可以使用计算属性过滤数据，将 v-if 的判断逻辑提前到计算属性中，在计算属性里对数组进行过滤，返回一个只包含需要渲染元素的新数组，然后再使用 v-for 对新数组进行渲染。这样可以避免不必要的循环，提高渲染效率。

（3）组件间通信方式有哪些？详细说明。

父向子通信，使用props 传递数据。
子向父通信：方法一：子组件通过 $emit 触发自定义事件，并传递数据；父组件在使用子组件时监听该事件，并定义相应的回调函数来处理数据。方法二：父组件可以给子组件添加 ref 属性，然后通过 $refs 访问子组件的实例，进而调用子组件的方法或访问其数据。
非父子组件间通信：事件总线Event Bus，使用 $emit 触发事件，使用 $on 监听事件、Vuex等。

（4）v-if和v-show的区别，开销，使用场景

v-if 是真正的条件渲染，它会根据表达式的值来动态地插入或移除 DOM 元素。当表达式的值为 true 时，元素会被插入到 DOM 中并渲染；当表达式的值为 false 时，元素会从 DOM 中移除。 v-show 只是简单地通过修改元素的 display CSS 属性来控制元素的显示与隐藏。无论表达式的值是 true 还是 false，元素始终会存在于 DOM 中。

v-if 切换开销较高，v-show切换开销较低。

v-if 适用于在运行时条件很少改变的场景。例如，在用户登录后根据用户角色显示不同的菜单选项，用户角色在登录后通常不会频繁改变，此时使用 v-if 可以在初始渲染时就根据条件决定是否渲染相应的菜单元素，避免不必要的 DOM 元素存在。

v-show 更适合需要频繁切换显示状态的场景。比如在一个电商页面中，商品详情页的展开和收起功能，用户可能会多次点击展开或收起按钮，使用 v-show 可以在不频繁操作 DOM 的情况下实现元素的显示与隐藏，提升用户体验和页面性能。

（5）vue2的生命周期有哪些？create和mounted谁先谁后？分别做了什么？

beforeCreate 、 created、beforeMount、 mounted、beforeUpdate 、 updatedbeforeDestroy 、destroyed

created 先于 mounted 执行。created 阶段主要完成了数据和方法的初始化，开发者可以在这个阶段进行数据的获取和处理，为后续的渲染做准备。而 mounted 阶段则是在 DOM 渲染完成后执行，适合进行一些依赖于 DOM 的操作，因为此时页面上已经可以看到渲染后的内容，能够确保操作的 DOM 元素是存在的。

（6）父组件与子组件在创建、更新、销毁时的生命周期是怎么交叉的？

创建阶段：父组件 beforeCreate -> 父组件 created -> 父组件 beforeMount -> 子组件 beforeCreate -> 子组件 created -> 子组件 beforeMount -> 子组件 mounted -> 父组件 mounted。

更新阶段：父组件 beforeUpdate -> 子组件 beforeUpdate -> 子组件 updated -> 父组件 updated。

销毁阶段：父组件 beforeDestroy -> 子组件 beforeDestroy -> 子组件 destroyed -> 父组件 destroyed。

（7）数组的常用方法有哪些？在开头和结尾的添加/删除分别是哪个方法？

unshift（在开头添加）、shift（在开头删除）、push（在末尾添加）、pop（在末尾删除）、sort、map、forEach、reduce、set等。

（8）map方法会对原数组进行修改吗？

不会，map的主要作用是创建一个新数组。

（9）怎么实现用户权限管理？

用户登录时，后端需验证用户身份并返回该用户所拥有的权限信息，前端使用localStorage 将这些信息存储在本地。在页面访问权限控制上，利用前置路由守卫router.beforeEach进行拦截，可以在这个守卫中获取用户的权限信息，与目标路由所需的权限进行比对。如果用户没有相应权限，就。阻止路由跳转

（10）关于css的问题：如果想要实现一个功能，左边是输入的文字，右边是一个按钮，怎么实现随着文本变长，不会把按钮挤走，多余的文字以省略号的形式体现？