第一次面试（深圳-2.13）

一.vue单页面的优缺点

优点

1.用户体验好，内容的改变不会重新加载整个页面，避免不必要的跳转的重复渲染，继而对服务器的压力较小

2.前后端分离清晰，架构清晰，前端只进行逻辑交互，后端做数据处理

缺点

1.初次加载耗时过多，可能会出现空白页

2.前进和后退需要路由去进行管理，浏览器本身无法实现前进和后退

3.不利于SEO(搜索引擎优化)，因为所有的内容都在一个页面中

二.组件生命周期以及应用场景

1、beforeCreate阶段： vue实例还未创建，数据观测和事件初始化还未开始

2、created阶段： vue实例已创建，实例配置的options：datat methods watch computed等初始化配置完成，但此阶段渲染的节点还未挂载到DOM上去，所以不能访问el属性。在此阶段可以完成数据初始化、对初始化数据绑定事件的相关操作、以及发送ajax请求等

3、beforeMount阶段：在这个阶段已经编译好模板，并将data里面的数据和模板生成html，但此时还未挂载html到页面上

4、mounted阶段： 完成将模板中的html渲染到页面，在此阶段可以操作DOM元素，获取渲染元素对应的dom节点

5、beforeUpdate阶段： 在监听到数据变化之后触发，此阶段虽然已经拿到最新的数据，但还未渲染到视图上去

6、Updated阶段： 执行时已经将更新后的数据渲染到页面，在页面中可以看到最新的数据

7、beforeDestory阶段： 在实例销毁前调用，这一阶段vue实例及其配置项都还是可用状态，在这阶段可以做最后的移除定时器和事件绑定操作

8、destoryed阶段： 该阶段vue实例已完全销毁，vue所指示的所有东西都会解除绑定，事件监听器被移除，所有vue实例也会被销毁

另外还有 keep-alive 独有的生命周期，分别为 activated 和 deactivated 。用 keep-alive 包裹的组件在切换时不会进行销毁，而是缓存到内存中并执行 deactivated 钩子函数，命中缓存渲染后会执行 activated 钩子函数。

三.promise和async/await

函数前使用关键字async，await只能用在async标记的函数内。比promise更简洁处理结果上：promise需要使用.then()来处理promise返回的结果，而async/await则直接在代码上顺序处理结果。

promise的诞生是为了简化函数嵌套调用流程，也便于后续维护。

async/await定义了异步函数，并在其内部可通过await等待promise对象，阻塞后续的执行。

四.http属于TCP/IP哪一层，为什么http传输数据可靠？

tcp/ip的五层模型：

从下到上：物理层->数据链路层->网络层->传输层->应用层

其中tcp/ip位于模型中的网络层，处于同一层的还有ICMP（网络控制信息协议）。http位于模型中的应用层

由于tcp/ip是面向连接的可靠协议，而http是在传输层基于tcp/ip协议的，所以说http是可靠的数据传输协议。

五.vue的底层原理

vue 作为一种MVVM模式的框架， 其数据绑定的底层原理为：数据劫持 + 发布订阅者模式。

其中主要有这么四种“角色”：

• Observer 
• Dep数据收集
• Watcer订阅者
• Compiler 模板编译器。

Observer 主要负责 数据劫持， 核心是通过Obeject.defineProperty()来监听数据的变动，这个函数内部可以定义setter和getter。每当数据发生变化，就会触发setter()。这时候 Observer 就要通知给Dep 说有数据发生了变化。

发布订阅模式主要是通过 Dep 和 Watcher 来完成。

Dep 中存放着 Watcher 实例化时存放的所有依赖，是个数据集，当 Dep 收到来自 Observer 的数据变化通知时，会调用 notice() 方法把发生变化的依赖告诉 Watcher。

Watcher 是订阅者，是连接 Observer 和 Compile 之间通信的桥梁，当它收到来自 Dep 的数据变化通知后，会调用自身的 update() 方法，并触发Compile中绑定的回调。

Compile 主要做的事情是解析模板指令，将模板中的变量替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦接收到数据有变动，收到通知，更新视图。

六.ssr和csr区别

SSR(Server Side Rendering) ：传统的渲染方式，由服务端把渲染的完整的页面吐给客户端。这样减少了一次客户端到服务端的一次http请求，加快相应速度，一般用于首屏的性能优化。

CSR(Client Side Rendering)：是一种目前流行的渲染方式，它依赖的是运行在客户端的JS，用户首次发送请求只能得到小部分的指引性HTML代码。第二次请求将会请求更多包含HTML字符串的JS文件。

简而言之，就是数据拼接HTML字符串这件事放在服务端还是客户端造成了两者区别。

简而言之，SSR强在首屏渲染。而CSR强在用户和页面多交互的场景。