暑期实习面经-菜鸟网络前端一面

1.自我介绍

2.前端学了多久？为什么要学前端？

3.你在你的前端项目里面，主要用的是什么技术？

追问

答：vue 追问：有没有用React？ 答：没有，没学过。 继续追问：那你在自己的前端项目里面有没有遇到一些什么问题，你自己是怎么去解决的？

4.Vue的数据响应式

追问

追问： 那你后端的数据发生变化的时候，前端是怎么进行感知的呢？

5.ES6的Proxy机制和上面提到的Vue2当中的Object.defineProperty()有什么区别呢？

6.那如果现在给你一个数组，这个数组是我现在正在监听的变量，那我给数组里面push一个值的时候，那页面上也会自动变化吗？比如我页面正在使用这个数组去渲染一个列表。这个数组可能就是一些学生的信息，每个元素都是一个对象，然后在vue的Template模板里面写了个v-for，然后用v-for去循环这个数组的元素，从而把学生信息打印出来。此时我在代码中的某个回调函数里面，再去push一个学生信息进入该数组，那么回调函数完成push操作之后，页面上会多出一个学生信息吗？

追问

那你这个数组此时是怎么去触发数据响应式的呢？因为我们常规使用的时候是要去调用 this.$set()方法，但是这个时候我并没有去手动调取该方法进行数据响应，那么vue里面是如何做到的呢？

换个方式追问： 数组其实存的是一个引用地址对吧，那么我给数组push一个新的元素的时候，它的引用地址是没有变化的，那vue此时是怎么知道我这个地址里面的内容发生了变化，要去重新渲染页面的呢？

第三种方式追问： 比如在这个数组里面，有一个对象A，它原本有个属性B，那我给它加个属性C，直接在代码里面加一个A.C的赋值，而不是手动调用this.$set()方法，那么此时页面上 直接渲染出来A.C吗？

【他终于受不了我对这个问题的不熟练，说不纠结这个了，换下个问题】

7.在vue2中，为什么对于data、状态的返回值一定是以函数的形式返回？

8.在vue中，使用import引入一个组件，还要放到components里面进行一下声明，为什么一定要这样声明一下？

9.在vue中，你有使用过自定义的指令吗？说一下。

10.v-model是如何实现数据的双向绑定的？

追问：

其实v-model本质上就是个语法糖嘛，你能说一下这个语法糖代表着什么代码吗？

追问：比如有一个input框，我把它绑定到一个data上面，那么在input框里面的值在变化的时候，data的值也会跟着变化，那么这个核心功能v-model是怎么做到的？

11.v-if和v-show的区别是？

追问

追问：你刚刚有提到，v-show去切换元素显示/隐藏状态的时候，是通过为该元素添加CSS的属性，也就是 display:none。 那么你添加了display:none，这个DOM元素的空间不会被释放吗？

<补充追问> 比如有两个span元素，（span是行内元素），我把第一个span的display设置成none，那么第二个元素不会跑到第一个span的地方去吗？

继续追问： 还有你刚刚说v-if的expression为false的时候不渲染，不渲染具体指什么？

反问： 到底是不去占据页面空间了，还是在DOM中就压根不存在这个元素了？

12.vue里面的过滤器你有使用过吗？比如说filter?

13.vue里面的插槽（slot）你有使用过吗？

14.vue中如果有一个表格，这个表格非常长，如果用分页来做的话又不是很方便，他又要做表格的勾选并进行后续操作，比如说这个表格可能有个一两千行，那这个页面可能就会比较卡顿，如果要你去优化页面性能，怎么优化？

追问

面试官追问： 你说的更多的是网络层面的东西，或者说是首次加载慢的处理方式，但是我想问的是，不光是首次加载，而是在页面已经加载好了之后，对于一个两千行的表格，比如这个时候我要在input框里面去填一些内容，我就发现我的光标明显有卡顿的现象，在这种情况下，你觉得可能是什么原因导致的呢？

面试官追问： 你刚刚说到，有可能过多的DOM元素和过于频繁的DOM操作会引起页面的卡顿，那么在刚刚的页面中，有什么方式可以对此进行优化吗？也就是说，怎么在不影响页面功能和UI展示的情况下，去减少DOM元素/DOM操作？

面试官追问： 在vue里面不是默认就会去做事件委托吗？

面试官再追问： 你觉得刚刚说的这些，是真的有去减少DOM里面渲染的元素吗？就比如说我有2000行表格，最终完成的时候DOM里面是不是还是有2000行？

面试官就说不纠结这个问题了，我反问了一下他会怎么做，面试官回答： 会对滚动条上下的数据进行一个预加载，在滚动的过程中再根据滚动的值，如果是往下面滚的话，就加载下面的数据，并且还要把上面的数据移除掉。 面试官补充：虽然你可能在实际开发中不需要这么做，但是你是要这样一个概念的，就是你页面卡顿的时候可能是这个问题。 你现在去用的时候，比如ElementUI，这些是可以开启虚拟滚动表格的，就很方便。

15.在js里面，逻辑与 逻辑或的返回值一定是布尔值吗？

追问

你觉得 5 && 6 的输出结果是什么？

16.在js里面，有两种数据类型，即基本数据类型和引用数据类型，那它们两有什么区别？用的时候有什么要注意的地方？

追问

面试官追问：那也就是说：作为函数参数传递的时候，将引用类型数据作为函数参数传递时，是传递了该对象的引用，因此在函数内部修改对象的属性或值，会影响到原来的对象，对吗？

追问：如果我传给这个函数的对象本身并不希望被函数改变，应该怎么做？

追问： 你平常是怎么实现深拷贝的？

17.在js里面，我们读取一个对象的属性的时候，有方括号或者点运算符，你觉得这两种方法有什么区别？

18.你觉得js里面的数组和其他语言的数组有什么区别？

19.你觉得js里面的对象的创建方式有哪些？

20.你如何理解CSS里面的单位像素的问题，你觉得px是一个绝对的值吗？

追问

追问：你觉得CSS中的像素单位1px和物理设备的像素点之间有什么关系？一个px就等于一个像素点吗？还是不是呢？

追问：那你说一下除了px以外，CSS中还有哪些单位？

追问：如果设计师给了你一个设计稿，里面有的一段文字，字体大小设置为font-size:10px你要怎么去实现？

面试官追问scale： 我在使用scale进行缩放的时候，比如本来一个div里面，我是从左到右写的，我如何改变scale缩放的基准点？

21.你说一下CSS里面有哪些定位方法？分别是用在什么情况下？

面试官追问： 绝对定位的时候你刚刚说是相对于最近的祖先元素进行定位？

回答：不是，是已经开启了定位的最近的祖先元素

继续追问：有定位是指？默认的定位不行对吧？（我觉得他这里这个默认定位讲的应该就是那种静态static的状态）

回答：对，默认的不行。

继续追问：你平时在给某个元素设置绝对定位的时候，要相对的开启定位的祖先元素你是开启什么定位？

回答：（这题我知道 relative相对定位）

继续追问：那我给元素设置position：relative 或者 position：absolute ，它们原本占据的空间都会被释放出来吗？

回答：使用绝对定位（position: absolute）会使元素脱离文档流。这意味着其他元素不再关注该绝对定位的元素的位置，而是像该元素不存在一样进行排版布局。脱离文档流的元素不占据空间，因此，当一个元素被设置为绝对定位时，它会覆盖在普通流中的其他元素之上。 使用相对定位不会完全脱离文档流，它在文档流中继续占据空间，但是其定位不再遵循文档流原本的位置。其他元素仍会根据相对定位后的位置来进行布局，可能会导致重叠或影响排列。