（一）谈一谈对 MVVM 的理解？

MVVM 是 Model-View-ViewModel 的缩写。MVVM 是一种设计思想。

• Model 层代表数据模型，也可以在 Model 中定义数据修改和操作的业务逻辑;
• View 代表 UI 组件，它负责将数据模型转化成 UI 展现出来，View 是一个同步 View 和 Model 的对象

在 MVVM 架构下，View 和 Model 之间并没有直接的联系，而是通过 ViewModel 进行交互， Model 和 ViewModel 之间的交互是双向的， 因此 View 数据的变化会同步到 Model 中，而 Model 数据的变化也会立即反应到 View 上。

（一）简述 TCP 连接的过程（淘系）

TCP 协议通过三次握手建立可靠的点对点连接，具体过程是：

首先服务器进入监听状态，然后即可处理连接

第一次握手：建立连接时，客户端发送 syn 包到服务器，并进入 SYN_SENT 状态，等待服务器确认。在发送的包中还会包含一个初始序列号 seq。此次握手的含义是客户端希望与服务器建立连接。

第二次握手：服务器收到 syn 包，然后回应给客户端一个 SYN+ACK 包，此时服务器进入 SYN_RCVD 状态。此次握手的含义是服务端回应客户端，表示已收到并同意客户端的连接请求。

（一）CMJ 和 ESM

1.CommonJS

1）关键词

• 社区标准
• 使用函数实现
• 仅 node 环境支持
• 动态依赖（需要代码运行后才能确定依赖）
• 动态依赖是 同步执行 的

2）原理

// require函数的伪代码
function require(path) {
  if (该模块有缓存吗) {
    return 缓存结果;
  }
  function _run(exports, require, module, __filename, __dirname) {
    // 模块代码会放到这里
  }

  var module = {
    exports: {},
  };

  _run.call(module.exports, module.exports, require, module, 模块路径, 模块所在目录);

  // 把 module.exports 加入到缓存;
  return module.exports;
}

（一）下面的模块导出了什么结果？

exports.a = "a";
module.exports.b = "b";
this.c = "c";
module.exports = {
  d: "d",
};

/* 
{ 
  d: 'd'
}
*/

（一）组件通信总结

面试题：vue 组件之间有哪些通信方式？

1.父子组件通信

绝大部分 vue 本身提供的通信方式，都是父子组件通信

• prop
• event
• style & class
• attribute
• native 修饰符
• $listeners
• v-model
• sync 修饰符
• $parent & $children
• $slots & $scopedSlots
• ref

（一）介绍下重绘和重排（repaint & reflow），以及如何进行优化

整个页面可以看做是一幅画，这幅画是由浏览器绘制出来的，浏览器绘制这幅画的过程称之为渲染。

渲染是一件复杂的工作，它大致分为以下几个过程：

1. 解析 HTML，生成 DOM 树，解析 CSS，生成样式规则树
2. 将 DOM 树和样式规则树结合，生成渲染树(Render Tree)
3. 根据生成的渲染树，确定元素的布局信息（元素的尺寸、位置），这一步称之为 reflow，译作重排或回流
4. 根据渲染树和布局信息，生成元素的像素信息（元素横纵的像素点，左上角的偏移量、每个像素的颜色等）。这一步称之为 repaint，译作重绘
5. 将像素信息提交到 GPU 完成屏幕绘制

（一）五层网络模型

1.分层的意义

• 当遇到一个复杂问题的时候，可以使用分层的思想把问题简单化

如：有半杯 82 年的可乐，想分享给朋友王富贵，但已经 10 年没有联系了。要完成这件事，可能要考虑：

• 我用什么装可乐？

  可能的方案：塑料瓶、玻璃瓶、煤气罐

• 怎么保证可乐始终处于低温？

  可能的方案：保温杯、小冰箱、冰盒

• 如何保证可乐不被运输的人偷喝？

  可能的方案：封条、在上面写「毒药」

• 如何获取王富贵的地址？

  可能的方案：报案失踪、联系私人侦探、联系物流公司的朋友

• 如何运输？

  可能的方案：自行车、汽车、火车、高铁、飞机、火箭

这就形成了一个分层结构

（一）根据下面 ES6 构造函数的书写方式，要求写出 ES5 的

class Example {
  constructor(name) {
    this.name = name;
  }
  init() {
    const fun = () ={
      console.log(this.name);
    };
    fun();
  }
}
const e = new Example("Hello");
e.init();

（一）Promise 基础

1.Promise 规范

• Promise 是一套专门处理异步场景的规范
• 能有效的避免回调地狱的产生，使异步代码更加清晰、简洁、统一
• 这套规范最早诞生于前端社区，规范名称为 Promise A+

2.Promise A+ 规定

1）所有的异步场景，都可以看作是一个异步任务

（一）下面代码的输出结果是什么

const promise = new Promise((resolve, reject) => {
  console.log(1);
  resolve();
  console.log(2);
});

promise.then(() => {
  console.log(3);
});

console.log(4);