速收藏！面试记录（内附详细答案）

昨天去一家公司面试，去之前一直复习vue和小程序的知识，例如vuex、vue-router等等…没想到一过去被问到的都是基础题（框架用久了，对于基础题，有点生疏，记录一下…）
1.margin塌陷问题/margin合并问题
塌陷解决方法：
a.overflow:hidden
overflow:hidden 可解决margin塌陷问题
b.触发BFC
触发bfc解决父子元素嵌套垂直方向margin塌陷问题
经典CSS缺陷–margin塌陷问题和margin合并问题
2.行内元素和块级元素
行内元素和块级元素
3.BFC
简单阐述：
块级格式化上下文，是一种边距重叠解决方案。
应用场景：
1.解决margin叠加的问题
2.用于布局（overflow: hidden）
3.BFC不会与浮动盒子叠加。
4. 用于清除浮动，计算BFC高度。
详看前面的1.b

4.事件的三大阶段
“DOM2级事件”规定的事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。 首先发生的是事件捕获，为截获事件提供了机会。然后是实际的目标接收到事件。最后一个阶段是冒泡阶段，可以在这个阶段对事件做出响应。

在 DOM 事件流中，实际的目标（ div 元素）在捕获阶段不会接收到事件。这意味着在捕获阶段，事件从 document 到 html 再到 body后就停止了。下一个阶段是“处于目标”阶段，于是事件在 div上发生，并在事件处理中被看成冒泡阶段的一部分。然后，冒泡阶段发生，事件又传播回文档。

5.如何阻止冒泡
a.event.stopPropagation()方法：不让事件向documen上蔓延
b.event.preventDefault()方法：阻止默认行为
c.return false （等于调用前面两种方法）
js阻止事件冒泡的三种方法
附：vue阻止事件冒泡：直接@click.stop/prevent => 如图

6.http的状态码包括哪些

常见：404、200、500
Http状态码

7.获取节点是在vue的哪个生命周期
挂载阶段：mouted生命周期可获取节点元素并进行操作。
附：vue获取dom节点的方法

8.JSONP
详细：js跨域方法

9.js的事件有哪些
常用：onclick、onchange等等
常用的js事件

10.onclick、addEventListener的区别
简单阐述：前者只可绑定一个对象，后者可绑定多个对象
详细：onclick、addEventListener的区别

11.computed和watch的区别（什么情况下使用computed/watch）
computed计算属性可用于快速计算视图(View)中显示的属性。这些计算将被缓存，并且只在需要时更新.
computed支持缓存，只有依赖数据发生变化，才会重新计算，性能开销小。

watch主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象，一般用于监控路由、input输入框的值特殊处理等等，它比较适合的场景是一个数据影响多个数据.
watch不支持缓存数据变会直接触发相应的操作，性能开销大。

12.vue中父子组件之间的传值
简单阐述：父传子：props 子传父：触发emit

13.绝对定位后以哪个点作为标准进行设置left、right的值
1、相对定位不脱离标准流，在页面中占位置 。
相对于自己原来的位置来进行定位 。
2、绝对定位脱离标准流，在页面中不占位置。
如果没有父元素，则相对于body定位；如果有父元素，但父元素没有定位，那么还是相对于body定位；如果父元素有定位，那么相对于父元素来定位。

14.事件委托
对“事件处理程序过多”问题的解决方案就是事件委托。 （事件委托的原理是事件冒泡）事件委托利用了事件冒泡，只指定一个事件处理程序，就可以管理某一类型的所有事件。例如， click 事件会一直冒泡到 document 层次。也就是说，我们可以为整个页面指定一个 onclick 事件处理程序，而不必给每个可单击的元素分别添加事件处理程序。
事件委托的优点：
[1] 可以大量节省内存占用，减少事件注册，比如在ul上代理所有li的click事件。
[2] 可以实现当新增子对象时，无需再次对其绑定（动态绑定事件）

事件委托js原生写法

传统写法：

//html
<ul id="myLinks">
  <li id="goSomewhere">Go somewhere</li>
  <li id="doSomething">Do something</li>
  <li id="sayHi">Say hi</li>
</ul>

//js

    var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    item1.onclick = function() {
      location.href = "http://www.baidu.com";
    };
    item2.onclick = function() {
      document.title = "事件委托";
    };
    item3.onclick = function() {
      alert("hi");
    };

事件委托写法
如果在一个复杂的 Web 应用程序中，对所有可单击的元素都采用这种方式，那么结果就会有数不清的代码用于添加事件处理程序。此时，可以利用事件委托技术解决这个问题。使用事件委托，只需在DOM 树中尽量最高的层次上添加一个事件处理程序。

//html如上
//js
 var item1 = document.getElementById("goSomewhere");
    var item2 = document.getElementById("doSomething");
    var item3 = document.getElementById("sayHi");
 
    document.addEventListener("click", function (event) {
      var target = event.target;
      switch (target.id) {
        case "doSomething":
          document.title = "事件委托";
          break;
        case "goSomewhere":
          location.href = "http://www.baidu.com";
          break;
        case "sayHi": alert("hi");
          break;
      }
    })