2021年最新面试题总结-vue

1. webpack构建项目流程
   Webpack 的运行流程是一个串行的过程，从启动到结束会依次执行以下流程：

• 1，初始化参数：从配置文件和 Shell 语句中读取与合并参数，得出最终的参数；
• 2，开始编译：用上一步得到的参数初始化 Compiler 对象，加载所有配置的插件，执行对象的 run 方法开始执行编译；
• 3，确定入口：根据配置中的 entry 找出所有的入口文件；
• 4，编译模块：从入口文件出发，调用所有配置的 Loader 对模块进行翻译，再找出该模块依赖的模块，再递归本步骤直到所有入口依赖的文件都经过了本步骤的处理；
• 5，完成模块编译：在经过第4步使用 Loader 翻译完所有模块后，得到了每个模块被翻译后的最终内容以及它们之间的依赖关系；
• 6，输出资源：根据入口和模块之间的依赖关系，组装成一个个包含多个模块的 Chunk，再把每个 Chunk 转换成一个单独的文件加入到输出列表，这步是可以修改输出内容的最后机会；
• 7，输出完成：在确定好输出内容后，根据配置确定输出的路径和文件名，把文件内容写入到文件系统。

在以上过程中，Webpack 会在特定的时间点广播出特定的事件，插件在监听到感兴趣的事件后会执行特定的逻辑，并且插件可以调用 Webpack 提供的 API 改变 Webpack 的运行结果。

2. 介绍一下vue3和vue2的区别
   利用新的语言特性(es6)
   解决架构问题
   Vue3的新特性，如下：
   速度更快
   体积减少
   更易维护
   更接近原生
   更易使用

• Typescript
  Vue3.0使用 TypeScript 重构，所以，别再纠结需要不需要学习TypeScript——学就对了！
• Proxy
  Vue3.0实现方式是通过 ES6 提供的 Proxy API，相比旧的 defineProperty API ，Proxy 可以代理数组&对象。
• reactivity
  Vue3.0 项目结构采用了 lerna 做 monorepo 风格的代码管理，简单来说就是源码的管理从多个包变成了集中管理。

3. vue3优化了哪些内容

• 响应式系统提升
  vue2在初始化的时候，对data中的每个属性使用definepropery调用getter和setter使之变为响应式对象。如果属性值为对象，还会递归调用defineproperty使之变为响应式对象。
  vue3使用proxy对象重写响应式。proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。
  优势：
  可以监听动态新增的属性；
  可以监听删除的属性 ；
  可以监听数组的索引和 length 属性；
• 编译优化
  静态提升
  缓存事件处理函数
• 源码体积的优化
  vue3移除了一些不常用的api
  使用tree-shaking
• Proxy 相对于 Object.defineProperty 有哪些优点？
  proxy的性能本来比defineproperty好，proxy可以拦截属性的访问、赋值、删除等操作，不需要初始化的时候遍历所有属性，另外有多层属性嵌套的话，只有访问某个属性的时候，才会递归处理下一级的属性。

可以监听数组变化
可以劫持整个对象
操作时不是对原对象操作,是 new Proxy 返回的一个新对象
可以劫持的操作有 13 种

4. vue的keepalive的原理是什么

//keepalive包含的组件会被进行缓存
<keep-alive>
  <component />
</keep-alive>

• activated 当keepalive包含的组件再次渲染的时候触发

• deactived 当keepalive包含的组件销毁的时候触发

• keepalive可以接收三个属性作为参数进行匹配对应的组件进行缓存

• include 包含的组件

• exclude 排除的组件

• max 缓存组件的最大值

包含部分不需要多次init的组件，将该部分组件持久化
keepalive是一个抽象组件，缓存vnode，缓存的组件不会被mounted，为此提供activated 和 deactivated 钩子函数, 使用props max 可以控制缓存组件个数

它是一个动态组件，同时也是vue的内置组件，当组件在切换的过程中，keep-alive可以将状态保存在内存中，防止重复渲染dom。
会增加两个生命周期：
组件激活时：actived() 该钩子在服务器渲染期间不能被调用
组件停用时：deactivated() 该钩子在服务器渲染期间不能被调用