1.前端项目如何部署

前后端分离开发模式下，前后端是独立布署的，前端只需要将最后的构建物上传至目标服务器的web容器指定的静态目录下即可

我们知道vue项目在构建后，是生成一系列的静态文件

常规布署我们只需要将这个目录上传至目标服务器即可

1.vue项目在本地时运行正常，但部署到服务器中，刷新页面，出现了404错误

答：HTTP 404 错误意味着链接指向的资源不存在。Vue是属于单页应用（single-page application），也就是说不管我们应用有多少页面，构建物都只会产出一个index.html，当切换到不同的页面，nginx location 是没有相关配置的，所以就会出现 404 的情况

为什么hash模式下没有问题

hash 虽然出现在 URL 中，但不会被包括在 HTTP 请求中，对服务端完全没有影响，因此改变 hash 不会重新加载页面

解决方案

nginx: 需要配置将任意页面都重定向到 index.html，把路由交由前端处理，

前端：应该在 Vue 应用里面覆盖所有的路由情况，然后在给出一个 404 UI页面

先定位一下，HTTP 404 错误意味着链接指向的资源不存在

问题在于为什么不存在？且为什么只有history模式下会出现这个问题？

2.VUE的diff算法

虚拟DOM表示真实DOM的JS对象

diff算法

虚拟DOM表示真实DOM的JS对象，如何做到快速找到两个虚拟DOM之间存在的差异，来可以最小化的更新视图，就需要vue的diff算法。vuediff算法的两个特点：

• 比较只会在同层级进行, 不会跨层级比较

• 在diff比较的过程中，循环从两边向中间比较

具体流程：当数据改变的时候，会触发一系列函数，首先判断他是不是同类标签，不是就直接替换，是同类标签的话就判断是否相等，相等的话就直接return。不相等的话就分情况执行一些列的增加，删除，替换的操作。其中有一种是如果新旧node都有子节点，那就执行updateChildren[循环从两边向中间比较]，找到可以复用的节点并移动位置，如果最终没有找到的话则使用key值去比对，相同就复用并移动到相应的位置，没有就新建。

如果快速能找到两个虚拟DOM之间存在的差异，就可以最小化的更新视图，就需要diff算法

diff算法的本质就是比较两个js对象的差异

updateChildren

vuediff算法updateChildren只在同级比对，减少比对次数，提高比对性能

updateChildren采用的是首尾指针法

虚拟DOM表示真实DOM的JS对象，如何做到快速找到两个虚拟DOM之间存在的差异，来可以最小化的更新视图，就需要vue的diff算法。vuediff算法的两个特点：

• 比较只会在同层级进行, 不会跨层级比较

• 在diff比较的过程中，循环从两边向中间比较

具体流程：当数据改变的时候，会触发一系列函数，首先判断他是不是同类标签，不是就直接替换，是同类标签的话就判断是否相等，相等的话就直接return。不相等的话就分情况执行一些列的增加，删除，替换的操作。其中有一种是如果新旧node都有子节点，那就执行updateChildren[循环从两边向中间比较]，找到可以复用的节点并移动位置，如果最终没有找到的话则使用key值去比对，相同就复用并移动到相应的位置，没有就新建。

3.VUE 与 React 区别

1. 写法层面：react 创造了 JSX 语法。JSX 语法的出现允许我们在 javascript 中书写 HTML 代码。|| VUE 使用了模板系统[也就是普通的 HTML]。Vue 有单文件组件，可以把 HTML、CSS、JS 写到一个文件中

2. 核心思想：React 整体是函数式的思想，在 React 中是单向数据流【数据不可变】。|| Vue 的思想是响应式的，也就是基于是数据可变的[通过对每一个属性建立 Watcher 来监听，当属性变化的时候，响应式的更新对应的虚拟 DOM。]

3. 使用方面：如上所说的 Vue 的响应式机制也有问题，当 state 特别多的时候，Watcher 会很多，会导致卡顿，所以大型应用（状态特别多的）一般用 React，更加可控。

4.VUE 与 React 共同点

• virtual dom

• 组件化，类似的组件生命机制(vue中路由切换时，会导致原路由的组件destory)

• 数据驱动(vue:props -> data -> methods -> computed -> watch)

• 有配套的路由和负责处理全局状态管理的库

5. 虚拟DOM一定更快吗

干前端的都知道DOM操作是性能杀手，因为操作DOM会引起页面的回流或者重绘。相比起来，通过多一些预先计算来减少DOM的操作要划算的多。

但是，“使用虚拟DOM会更快”这句话并不一定适用于所有场景。例如：一个页面就有一个按钮，点击一下，数字加一，那肯定是直接操作DOM更快。使用虚拟DOM无非白白增加了计算量和代码量。

那么为什么现在的框架都使用虚拟DOM呢？因为使用虚拟DOM可以提高代码的性能下限，并极大的优化大量操作DOM时产生的性能损耗。

vue等使用了虚拟DOM框架，不光是因为他们快，还有很多其他更重要的原因。例如react对函数式编程的友好，vue优秀的开发体验等

6.vue中的双向绑定

我们先从单向绑定切入单向绑定非常简单，就是把Model绑定到View，当我们用JavaScript代码更新Model时，View就会自动更新。双向绑定就很容易联想到了，在单向绑定的基础上，用户更新了View，Model的数据也自动被更新了，这种情况就是双向绑定举个栗子

7.双向绑定的原理是什么

我们都知道 Vue 是数据双向绑定的框架，双向绑定由三个重要部分构成

• 数据层（Model）：应用的数据及业务逻辑

• 视图层（View）：应用的展示效果，各类UI组件

• 业务逻辑层（ViewModel）：框架封装的核心，它负责将数据与视图关联起来

而上面的这个分层的架构方案，可以用一个专业术语进行称呼：MVVM这里的控制层的核心功能便是 “数据双向绑定” 。自然，我们只需弄懂它是什么，便可以进一步了解数据绑定的原理

理解ViewModel

它的主要职责就是：

• 数据变化后更新视图

• 视图变化后更新数据

当然，它还有两个主要部分组成

• 监听器（Observer）：对所有数据的属性进行监听

• 解析器（Compiler）：对每个元素节点的指令进行扫描跟解析,根据指令模板替换数据,以及绑定相应的更新函数

Vue中的双向绑定流程是什么的

1. new Vue()首先执行初始化，对data执行响应化处理，这个过程发生Observe中

2. 同时对模板执行编译，找到其中动态绑定的数据，从data中获取并初始化视图，这个过程发生在Compile中

3. 同时定义⼀个更新函数和Watcher，将来对应数据变化时Watcher会调用更新函数

4. 由于data的某个key在⼀个视图中可能出现多次，所以每个key都需要⼀个管家Dep来管理多个Watcher

5. 将来data中数据⼀旦发生变化，会首先找到对应的Dep，通知所有Watcher执行更新函数

最简单的理解是：首先执行初始化，在Observe中监听所有属性，在compile阶段初始化视图。

将来data中数据一旦发生变化，首先找到对应dep，通知watcher执行更新函数updater

8.v-show与v-if

共同点: 都能控制元素在页面是否显示,用法上也是相同的

不同点：

控制手段：v-show隐藏则是为该元素添加css--display:none，dom元素依旧还在。v-if显示隐藏是将dom元素整个添加或删除

编译过程：v-if切换有一个局部编译/卸载的过程，切换过程中合适地销毁和重建内部的事件监听和子组件；v-show只是简单的基于css切换

性能消耗：v-if有更高的切换消耗；v-show有更高的初始渲染消耗；

使用场景：

如果需要非常频繁地切换，则使用 v-show 较好

如果在运行时条件很少改变，则使用 v-if 较好

9.vue生命周期

10.数据请求在created和mouted的区别

created是在组件实例一旦创建完成的时候立刻调用，这时候页面dom节点并未生成mounted是在页面dom节点渲染完毕之后就立刻执行的触发时机上created是比mounted要更早的

两者相同点：都能拿到实例对象的属性和方法。讨论这个问题本质就是触发的时机，放在mounted请求有可能导致页面闪动（页面dom结构已经生成），但如果在页面加载前完成则不会出现此情况建议：放在create生命周期当中

11.永远不要把 v-if 和 v-for 同时用在同一个元素上，

首屏加载

首屏时间（First Contentful Paint），指的是浏览器从响应用户输入网址地址，到首屏内容渲染完成的时间，此时整个网页不一定要全部渲染完成，但需要展示当前视窗需要的内容

首屏加载可以说是用户体验中最重要的环节

利用performance.timing提供的数据：

通过DOMContentLoad或者performance来计算出首屏时间

// 方案一：
document.addEventListener('DOMContentLoaded', (event) => {console.log('first contentful painting');
});
// 方案二：
performance.getEntriesByName("first-contentful-paint")[0].startTime// performance.getEntriesByName("first-contentful-paint")[0]
// 会返回一个 PerformancePaintTiming的实例，结构如下：
{name: "first-contentful-paint",entryType: "paint",startTime: 507.80000002123415,duration: 0,
};

二、加载慢的原因

在页面渲染的过程，导致加载速度慢的因素可能如下：

• 网络延时问题

• 资源文件体积是否过大

• 资源是否重复发送请求去加载了

• 加载脚本的时候，渲染内容堵塞了

三、解决方案

常见的几种SPA首屏优化方式

• 减小入口文件积

• 静态资源本地缓存

• UI框架按需加载

• 图片资源的压缩

• 组件重复打包

• 开启GZip压缩

• 使用SSR