前端面试的问题（2）

浏览器事件循环机制

• JavaScript在浏览器中是单线程，Javascript 有一个主线程（main thread）和 执行栈(call-stack)，所有的任务都会被放到执行栈等待主线程执行。
• JS 执行栈是一种后进先出的数据结构。当函数被调用时，会被添加到栈中的顶部，执行完成之后就从栈顶部移出该函数，直到栈内被清空。
• JavaScript 单线程中的任务分为同步任务和异步任务。同步任务会在执行栈中按照顺序排队等待主线程执行，异步任务则会在异步有了结果后将注册的回调函数添加到任务队列(消息队列)中等待主线程空闲的时候，也就是栈内被清空的时候，被读取到栈中等待主线程执行。任务队列是先进先出的数据结构。
• 执行栈中的同步任务都执行完毕，栈内被清空了，就代表主线程空闲了，这个时候就会去任务队列中按照顺序读取一个任务放入到栈中执行。每次栈内被清空，都会去读取任务队列有没有任务，有就读取执行，一直循环读取-执行的操作，就形成了事件循环。
• 除了广义的同步任务和异步任务，JavaScript 单线程中的任务可以细分为宏任务和微任务。
  macro-task包括：script(整体代码), setTimeout, setInterval, setImmediate, I/O, UI rendering。
  micro-task包括：process.nextTick, Promises, Object.observe, MutationObserver。
  第一次事件循环中，JavaScript 引擎会把整个 script 代码当成一个宏任务执行，执行完成之后，再检测本次循环中是否寻在微任务，存在的话就依次从微任务的任务队列中读取执行完所有的微任务，再读取宏任务的任务队列中的任务执行，再执行所有的微任务，如此循环。JS 的执行顺序就是每次事件循环中的宏任务-微任务。

JavaScript原型和原型链

• 原型prototype
  prototype是一个属性，同时它本身也是一个对象，javascript中所有的函数都有prototype这个属性，反过来所有具有prototype的对象本身也是一个函数。
• __proto__和原型链
  __proto__是一个指针，它指的是构造它的对象的对象的prototype
• __proto__是实现原型链的关键，而prototype则是原型链的组成
  https://www.cnblogs.com/alichengyin/p/4852616.html

捕获事件要比冒泡事件先触发

<div id="test" class="test">
<div id="testInner" class="test-inner"></div>
</div>
 
var btn = document.getElementById("test");
//捕获事件
btn.addEventListener("click", function(e){
  alert("ok1");
}, true);

//冒泡事件
btn.addEventListener("click", function(e){
  alert("ok");
}, false);

GET和POST的区别

• GET
  请求可被缓存
  请求保留在浏览器历史记录中
  请求可被收藏为书签
  请求不应在处理敏感数据时使用
  请求有长度限制。当发送数据时，GET 方法向 URL 添加数据；URL 的长度是受限制的（URL 的最大长度是 2048 个字符）。
  对数据类型有限制，只允许 ASCII 字符。
  与 POST 相比，GET 的安全性较差，因为所发送的数据是 URL 的一部分。
  请求只应当用于取回数据
  数据在 URL 中对所有人都是可见的。
• POST
  请求不会被缓存
  请求不会保留在浏览器历史记录中
  不能被收藏为书签
  请求对数据长度没有要求
  对数据类型没有限制，也只允许二进制数据
  POST 比 GET 更安全，因为参数不会被保存在浏览器历史或 web 服务器日志中
  数据不会显示在 URL 中。

http请求头

https://www.cnblogs.com/honghong87/articles/6941436.html

MVC和MVVM

• MVC
  Model：数据模型，是对客观事物的抽象。
  View：视图，呈现给用户的效果，呈现的内容是基于Model，它也是收集用户输入的地方。
  Controller：控制器。View不服对Model作任何操作，Model不会输出任何用于表现的东西，而Controller用于决定使用哪些Model，对Model执行哪些操作，为视图准备哪些数据，是MVC中沟通的桥梁。
  MVC的通信是单向的：浏览器发送请求，Controller和Model交互获取数据，Controller调用View，View渲染数据返回。
• MVVM
  Model：数据模型，也可以在Model中定义数据修改和操作的逻辑；
  View代表UI组件，它负责将数据模型转化成UI展现出来；
  ViewModel是一个同步View和Model的对象。View和Model之间并没有直接的联系，而是通过ViewModel进行交互。ViewModel通过双向数据绑定把View层和Model层连接起来，而View和Model之间的同步工作是完成自动的，无需人为干涉，因此开发者只需关注业务逻辑，不需要手动操作DOM，不需要关注数据状态的同步问题，复杂的数据状态完全由MVVM来统一管理。

Vue的生命周期函数

• beforeCreate
  在beforeCreate生命周期函数执行的时候，data和methods中的数据都还没有没初始化
• created
  在 created 中，data 和 methods 都已经被初始化好了，如果要调用methods中的方法，或者操作 data 中的数据，最早只能在 created 中操作
• beforeMount
  模板已经在内存中编辑完成了，但是尚未把 模板渲染到 页面中。在 beforeMount 执行的时候，页面中的元素，还没有被真正替换过来，只是之前写的一些模板字符串
• mounted
  内存中的模板，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了。mounted是实例创建期间的最后一个生命周期函数，当执行完mounted就表示，实例已经被完全创建好了
• beforeUpdate
  当执行beforeUpdate的时候，页面中的显示的数据，还是旧的，此时data数据是最新的，页面尚未和最新的数据保持同步
• updated
  updated 事件执行的时候，页面和 data 数据已经保持同步了，都是最新的
• beforeDestroy
• destroyed
  销毁完成后，我们再重新改变data的值，vue不再对此动作进行响应了。但是原先生成的dom元素还存在，可以这么理解，执行了destroy操作，后续就不再受vue控制了。因为这个Vue实例已经不存在了

vue数据双向绑定的实现原理

官网解释：https://cn.vuejs.org/v2/guide/reactivity.html
当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 getter/setter。Object.defineProperty 是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。
这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 追踪依赖，在属性被访问和修改时通知变化。这里需要注意的问题是浏览器控制台在打印数据对象时 getter/setter 的格式化并不同，所以你可能需要安装 vue-devtools 来获取更加友好的检查接口。
每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新。

vue-router的钩子函数

• 全局钩子：这类钩子主要作用于全局,一般用来判断权限,以及以及页面丢失时候需要执行的操作

1. beforEach(to, from, next)
   参数1：router即将进入的路由对象
   参数2：当前导航即将离开的路由
   参数3：是一个函数，进行管道中的一个钩子，如果执行完了，则导航的状态就是 confirmed （确认的）；否则为false，终止导航。
2. afterEach函数不用传next()函数

• 单个路由里面的钩子：主要用于写某个指定路由跳转时需要执行的逻辑
• 组件路由：主要包括 beforeRouteEnter和beforeRouteUpdate ,beforeRouteLeave,这几个钩子都是写在组件里面也可以传三个参数(to,from,next),作用与前面类似。

Vue为什么不支持IE8以下的版本

使用了Object.defineProperty 。Object.defineProperty是 ES5 中一个无法 shim 的特性，这也就是为什么 Vue 不支持 IE8 以及更低版本浏览器。