1、vue性能优化

路由懒加载
Keep-alive缓存页面
使用v-show不要使用v-if
V-for的时候避免同时使用v-if。可以在computed的时候处理一下数据，这样在渲染的时候就不用判断
长列表性能优化。如果列表纯粹的数据展示，不会有任何变化，就不需要做响应化
如果表格过多，可以先渲染一部分，滚动的时候再渲染继续加载数据
事件的销毁，如果绑定了一些类似于setInterval的事件，要记得销毁
图片懒加载v-lazy
第三方组件可以按需引入（例如elemnetui），避免体积过大

2、vue组件data为什么必须是个函数而vue的根实例则没有这个限制？

如果使用实例，是组件使用的时候，会导致多个组件使用同一个data，会造成data相互耦合污染根实例：他是通过new生产的一个实例对象，他本身就只有一个对象使用这个data，所以不存在污染

3、vue组件间通信的方式

1. 通信种类

- 父组件向子组件通信
- 子组件向父组件通信
- 隔代组件间通信
- 兄弟组件间通信

2. 实现通信方式

- props
- vue自定义事件
- 消息订阅与发布
- vuex
- slot（在父组件当中编译好了，再传递给子组件）
- $parent访问父组件或者$refs访问子组件
- 依赖注入：provide和inject（子组件都可以访问，但是不是响应式的）

3. 方式介绍

props
1. 通过一般属性实现父向子通信
2. 通过函数属性实现子向父通信
3. 缺点：隔代组件和兄弟组件之间通信比较麻烦
vue自定义事件

vue内置实现，可以替代函数类型的props
1. 绑定监听：@eventName=”callback”
2. 触发（分发）事件：this.$emit(“eventName”, data) 缺点：只适合于子向父通信

- **消息订阅与发布**

    需要引入消息订阅与发布的实现库，如：pubsub-js
    1. 订阅消息：PubSub.subscribe(‘msg’, (msg,data)=>{})；
    2. 发布消息：PubSub.publish(‘msg’, data);
    优点：可用于任意关系组件间通信

4、Vuex管理状态的机制

对Vuex基本理解

是什么: Vuex 是一个专为 Vue.js 应用程序开发的状态管理的vue插件
作用: 集中式管理vue多个组件共享的状态和从后台获取的数据
工作原理

5、说说Vue的MVVM实现原理

1) 理解

Vue作为MVVM模式的实现库的2种技术
- 模板解析 // 通过模板动态显示数据
- 数据绑定 // 通过数据绑定来更新数据，页面自动变化
模板解析: 实现初始化显示
- 解析大括号表达式
- 解析指令
数据绑定: 实现更新显示
- 通过数据劫持实现

2) 原理结构图

vue2和vue3的区别

vue3支持大多数vue2的特性
vue3设计了一套强大的组合api代替了vue2的 optionapi，功能会更加优雅和复用性更强
更好的支持ts
vue3使用了proxy配合reflect代替了vue2的object.defineProperty()
重写了虚拟dom，速度更快了
新的组件：fragment(片段)、teleport(瞬移)、suspense
重新设计了一个新的脚手架工具vite

v3和v2对比，具有下面的优点

性能

给动态的节点打tag Vue在运行时会生成number（大于0）值的PatchFlag，用作标记。仅带有PatchFlag标记的节点会被真正追踪，且无论层级嵌套多深，它的动态节点都直接与Block根节点绑定，无需再去遍历静态节点

静态提升，把静态的提升到外层

事件监听缓存

支持tree shanking

7、前端spa

8、单线程和多线程

9、前端页面优化

10、ng相关知识

11、前端安全相关

12、vue声明周期

13、vue 虚拟dom

14、webpack相关

source-map

source-map: 一种提供源代码到构建后代码映射技术（如果构建后代码出错了，通过映射可以追踪源代码错误）

module.exports = {
    devtool: 'eval-source-map'
}

常用有：[inline-|hidden-|eval-][nosources-][cheap-[module-]]source-map
内联 和 外部的区别：1. 外部生成了文件，内联没有 2. 内联构建速度更快

source-map：外部错误代码准确信息和源代码的错误位置
inline-source-map：内联只生成一个内联source-map 错误代码准确信息和源代码的错误位置
hidden-source-map：外部错误代码错误原因，但是没有错误位置不能追踪源代码错误，只能提示到构建后代码的错误位置
eval-source-map：内联每一个文件都生成对应的source-map，都在eval 错误代码准确信息和源代码的错误位置
nosources-source-map：外部错误代码准确信息, 但是没有任何源代码和构建代码的信息
cheap-source-map：外部错误代码准确信息和源代码的错误位置只能精确的行
cheap-module-source-map：外部错误代码准确信息和源代码的错误位置 module会将loader的source map加入

开发环境：速度快，调试更友好

速度快(eval>inline>cheap>...)
- eval-cheap-souce-map
- eval-source-map
调试更友好
- souce-map
- cheap-module-souce-map
- cheap-souce-map

综上所述，开发环境选择： eval-source-map / eval-cheap-module-souce-map

生产环境

源代码要不要隐藏? 调试要不要更友好。内联会让代码体积变大，所以在生产环境不用内联

nosources-source-map 全部隐藏
hidden-source-map 只隐藏源代码，会提示构建后代码错误信息

hash的解释

* hash: 每次wepack构建时会生成一个唯一的hash值。

    问题: 因为js和css同时使用一个hash值。如果重新打包，会导致所有缓存失效。（可能我却只改动一个文件）
* chunkhash：根据chunk生成的hash值。如果打包来源于同一个chunk，那么hash值就一样（入口文件是一个，就是一个chunk）

  问题: js和css的hash值还是一样的，因为css是在js中被引入的，所以同属于一个chunk

* contenthash: 根据文件的内容生成hash值。不同文件hash值一定不一样，让代码上线运行缓存更好使用

面试题总结1