美团前端实习口试记载

前半小时问了很多项目相关的问题，问得很具体，包括功能逻辑，实现细节，比方项目分页功能是前端还是后端实现的？数据过多时可以考虑怎么优化？等等
然后问了一些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的问题：如果想要实现一个功能，左边是输入的文字，右边是一个按钮，怎么实现随着文本变长，不会把按钮挤走，多余的文字以省略号的形式体现？
   文本框与按钮的父容器使用flex结构 display: flex;
  文本框设置flex: 1; white-space: nowrap;overflow: hidden; text-overflow: ellipsis;
  按钮设置 white-space: nowrap;
  （11）在前端学习和开辟中碰到的最大的问题是什么？
   口试官特别喜好问的一个问题。可以平时积聚一点，答复的有深度一点。
  比方，在……优化过程中碰到了什么困难，在数据量太大时碰到了……问题，等等。
  两道代码题，难度与之前面的其他厂相比要容易一点。
一道是查找嵌套的树状数组里面的元素，返回查找路径。口试官提示可以采用递归。
一道是给定一个数组和一个值，比方：nums=[1,2,5,6],target=3,返回相加得到target的数组下标[0,1]。


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。