1. MVVM

MVVM（Model–View–Viewmodel）是一种软件架构模式。

image

M： Model（数据模型）指后端进行的各种业务逻辑处理和数据操控，主要围绕数据库系统展开。
V： View（视图层）前端主要由 HTML 和 CSS 来构建。
VM：ViewModel（视图数据层）前端开发人员组织生成和维护的视图数据层。

Model和View并无直接关联，而是通过ViewModel来进行联系的，Model和ViewModel之间有着双向数据绑定的联系。因此当Model中的数据改变时会触发View层的刷新，View中由于用户交互操作而改变的数据也会在Model中同步。

这种模式实现了Model和View的数据自动同步，因此开发者只需要专注对数据的维护操作即可，而不需要自己操作dom。

• 优点
  低耦合、可复用、独立开发、方便测试

2.Vue2.x 响应式数据原理

• 当你把一个普通的 JavaScript 对象传入 Vue 实例作为 data 选项，Vue 将遍历此对象所有的 property，并使用 Object.defineProperty 把这些 property 全部转为 getter/setter。
• 这些 getter/setter 对用户来说是不可见的，但是在内部它们让 Vue 能够追踪依赖，在 property 被访问和修改时通知变更。
• 每个组件实例都对应一个 watcher 实例，它会在组件渲染的过程中把“接触”过的数据 property 记录为依>赖。之后当依赖项的 setter 触发时，会通知 watcher，从而使它关联的组件重新渲染。

3.Vue.3.x响应数据原理

• Vue3.x改用Proxy替代Object.defineProperty。
• 因为Proxy可以直接监听对象和数组的变化，并且有多达13种拦截方法。并且作为新标准将受到浏览器厂商重点持续的性能优化。
• Proxy只会代理对象的第一层，Vue3是怎样处理这个问题的呢？
  判断当前Reflect.get的返回值是否为Object，如果是则再通过reactive方法做代理， 这样就实现了深度观测。
  监测数组的时候可能触发多次get/set，那么如何防止触发多次呢？我们可以判断key是否为当前被代理对象target自身属性，也可以判断旧值与新值是否相等，只有满足以上两个条件之一时，才有可能执行trigger。

4. Vue2.x 如何检测数组变化

• 使用了函数劫持的方式，重写了数组的方法，Vue将data中的数组进行了原型链重写，指向了自己定义的数组原型方法。这样当调用数组api时，可以通知依赖更新。如果数组中包含着引用类型，会对数组中的引用类型再次递归遍历进行监控。这样就实现了监测数组变化。

5. nextTick实现原理

• 在下次DOM更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的DOM。

1. 先判断Promise

2. 在判断MutationObserver

3. 在判断setImmediate

4. 最后setTimeout

5. 每次event loop的最后，会有一个UI render，也就是更新DOM

6. 只要让nextTick里的代码放在UI render步骤后面执行，就能访问到更新后的DOM了

6. Vue的生命周期

Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。

• 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载呢，只是一个空壳，无法访问到数据和真实的dom，一般不做操作
• 挂载数据，绑定事件等等，然后执行created函数，这个时候已经可以使用到数据，也可以更改数据,在这里更改数据不会触发updated函数，在这里可以在渲染前倒数第二次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
• 接下来开始找实例或者组件对应的模板，编译模板为虚拟dom放入到render函数中准备渲染，然后执行beforeMount钩子函数，在这个函数中虚拟dom已经创建完成，马上就要渲染,在这里也可以更改数据，不会触发updated，在这里可以在渲染前最后一次更改数据的机会，不会触发其他的钩子函数，一般可以在这里做初始数据的获取
• 接下来开始render，渲染出真实dom，然后执行mounted钩子函数，此时，组件已经出现在页面中，数据、真实dom都已经处理好了,事件都已经挂载好了，可以在这里操作真实dom等事情...
• 当组件或实例的数据更改之后，会立即执行beforeUpdate，然后vue的虚拟dom机制会重新构建虚拟dom与上一次的虚拟dom树利用diff算法进行对比之后重新渲染，一般不做什么事儿
• 当更新完成后，执行updated，数据已经更改完成，dom也重新render完成，可以操作更新后的虚拟dom
• 当经过某种途径调用$destroy方法后，立即执行beforeDestroy，一般在这里做一些善后工作，例如清除计时器、清除非指令绑定的事件等等
• 组件的数据绑定、监听...去掉后只剩下dom空壳，这个时候，执行destroyed，在这里做善后工作也可以

7. 接口请求的生命周期

mounted

8. Computed与Watch

• computed

1. 计算属性是基于它们的响应式依赖进行缓存的，页面重新渲染值不会变化，计算属性会立即返回之前的计算结果，除非依赖的响应式属性变化才会重新计算。
2. 不支持异步，当computed内有异步操作时无效，无法监听数据的变化。
   如果computed属性属性值是函数，那么默认会走get方法；函数的返回值就是属性的属性值；在computed中的，属性都有一个get和一个set方法，当数据变化时，调用set方法。

• watch

1. 不支持缓存
2. 当数据变化，会触发相应的操作
3. watch支持异步操作
   deep：deep的意思就是深入观察，监听器会一层层的往下遍历，给对象的所有属性都加上这个监听器，但是这样性能开销就会非常大了，任何修改obj里面任何一个属性都会触发这个监听器里的 handler。
   优化： 可以直接监听 对象中的某一属性，如：obj.name

9. v-if与v-show

• v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。
• v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。
• 相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
• 一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

10.组件中的data为啥是一个函数

组件是可复用的vue实例，一个组件被创建好之后，就可能被用在各个地方，而组件不管被复用了多少次，组件中的data数据都应该是相互隔离，互不影响的，组件中的data写成一个函数，数据以函数返回值形式定义，这样每复用一次组件，就会返回一份新的data，类似于给每个组件实例创建一个私有的数据空间，让各个组件实例维护各自的数据。而单纯的写成对象形式，就使得所有组件实例共用了一份data，就会造成一个变了全都会变的结果。

11. v-model原理

• 见MVVM

• 其核心就是，一方面modal层通过defineProperty来劫持每个属性，一旦监听到变化通过相关的页面元素更新。另一方面通过编译模板文件，为控件的v-model绑定input事件，从而页面输入能实时更新相关data属性值。

• 监听器 Observer：对数据对象进行遍历，包括子属性对象的属性，利用 Object.defineProperty() 对属性都加上 setter 和 getter。这样的话，给这个对象的某个值赋值，就会触发 setter，那么就能监听到了数据变化。
• 解析器 Compile：解析 Vue 模板指令，将模板中的变量都替换成数据，然后初始化渲染页面视图，并将每个指令对应的节点绑定更新函数，添加监听数据的订阅者，一旦数据有变动，收到通知，调用更新函数进行数据更新。
• 订阅者 Watcher：Watcher 订阅者是 Observer 和 Compile 之间通信的桥梁 ，主要的任务是订阅 Observer 中的属性值变化的消息，当收到属性值变化的消息时，触发解析器 Compile 中对应的更新函数。每个组件实例都有相应的 watcher 实例对象，它会在组件渲染的过程中把属性记录为依赖，之后当依赖项的 setter 被调用时，会通知 watcher 重新计算，从而致使它关联的组件得以更新——这是一个典型的观察者模式
• 订阅器 Dep：订阅器采用 发布-订阅 设计模式，用来收集订阅者 Watcher，对监听器 Observer 和 订阅者 Watcher 进行统一管理。

12. Vue的事件绑定

• Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符
• 基本流程是进行模板编译生成AST，生成render函数后并执行得到VNode，VNode生成真实DOM节点或者组件时候使用addEventListener方法进行事件绑定。

13. Vue模板编译原理

1. 将模版字符串转换成element ASTs(解析器)
2. 是对AST进行静态节点标记，主要用来做虚拟DOM的渲染优化(优化器)
3. 是使用element ASTs生成render函数代码字符串(代码生成器)

14. Vue2.x与Vue3.x 渲染器的diff算法分别是啥

简单来说，diff算法有以下过程

• 同级比较，再比较子节点
• 先判断一方有子节点一方没有子节点的情况(如果新的children没有子节点，将旧的子节点移除)
• 比较都有子节点的情况(核心diff)
• 递归比较子节点

正常Diff两个树的时间复杂度是O(n^3)，但实际情况下我们很少会进行跨层级的移动DOM，所以Vue将Diff进行了优化，从O(n^3) -> O(n)，只有当新旧children都为多个子节点时才需要用核心的Diff算法进行同层级比较。

Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。相比React的Diff算法，同样情况下可以减少移动节点次数，减少不必要的性能损耗，更加的优雅。

Vue3.x借鉴了 ivi算法和 inferno算法
在创建VNode时就确定其类型，以及在mount/patch的过程中采用位运算来判断一个VNode的类型，在这个基础之上再配合核心的Diff算法，使得性能上较Vue2.x有了提升。(实际的实现可以结合Vue3.x源码看。)
该算法中还运用了动态规划的思想求解最长递归子序列。

15. 虚拟Dom以及key属性的作用

由于在浏览器中操作DOM是很昂贵的。频繁的操作DOM，会产生一定的性能问题。这就是虚拟Dom的产生原因
Virtual DOM本质就是用一个原生的JS对象去描述一个DOM节点。是对真实DOM的一层抽象
VirtualDOM映射到真实DOM要经历VNode的create、diff、patch等阶段
key的作用是尽可能的复用 DOM 元素
新旧 children 中的节点只有顺序是不同的时候，最佳的操作应该是通过移动元素的位置来达到更新的目的
需要在新旧 children 的节点中保存映射关系，以便能够在旧 children 的节点中找到可复用的节点。key也就是children中节点的唯一标识

（1）key的作用主要是为了高效的更新虚拟DOM
（2）当以index为key值时，如果数组长度发生变化，会导致key的变化，比如删除其中某一项，那么index会相应变化。
所以用index作为key和不加index没有什么区别，都不能提升性能。一般用每项数据的唯一值来作为key，就算数组长度变化，也不会影响到这个key

16. keep-alive

keep-alive是一个抽象组件：它自身不会渲染一个DOM元素，也不会出现在父组件链中；使用keep-alive包裹动态组件时，会缓存不活动的组件实例，而不是销毁它们。
keep-alive 缓存也是基于VNode节点 而不是直接存储 DOM 节点。
Keep-alive 组件提供了 include 和 exclude 两个属性，允许组件有条件的进行缓存。
include: 字符串或正则表达式。只有匹配的组件会被缓存。
exclude: 字符串或正则表达式。任何匹配的组件都不会被缓存。
Keep-alive 组件提供了两个生命钩子函数，分别是 activated 和 deactivated 。
activated ：当页面存在缓存的时候执行该函数。
deactivated ：在页面结束时触发该方法，可清除掉滚动方法等缓存。

17. Vue中组件生命周期调用顺序

• 加载渲染过程
  父beforeCreate->父created->父beforeMount->子beforeCreate->子created->子beforeMount->子mounted->父mounted

• 子组件更新过程
  父beforeUpdate->子beforeUpdate->子updated->父updated

• 父组件更新过程
  　父beforeUpdate->父updated

• 销毁过程
  　父beforeDestroy->子beforeDestroy->子destroyed->父destroyed

18. Vue2.x组件通信方式

父->子props / 子->父 $on、$emit

获取父子组件实例 $parent、$children, $Ref 获取实例的方式调用组件的属性或者方法

Vuex和Event Bus实现跨组件通信

$attrs、$listeners, provide、inject 祖孙间通讯，解决组件层级过深产生的复杂的传值问题

缓存 localStorage、sessionStorage、cookie等

路由传参啥的

19. ssr

在客户端请求服务器的时候，服务器到数据库中获取到相关的数据，并且在服务器内部将Vue组件渲染成HTML，并且将数据、HTML一并返回给客户端，这个在服务器将数据和组件转化为HTML的过程，叫做服务端渲染SSR

优点

1. 有利于SEO
2. SSR页面在服务端渲染完成之后返回给客户端，所以可以有更快的首屏到达时间

缺点

1. SSR 会占用服务器内存（可以使用一些缓存来减少压力）
2. 浏览器一些API无法使用，例如钩子函数只有beforeCreate created，因为服务器不知dom什么时候渲染完
3. 我们做项目的某些钩子就不能使用了，原因为了和服务端渲染保持一致，例如将ajax请求放在created中而不放在mouted中

20. Vue性能优化

性能优化

21. hash路由和history路由实现原理

hash模式:

原理: 在 url 中的 # 之后对应的是 hash 值, 其原理是通过hashChange() 事件监听hash值的变化, 根据路由表对应的hash值来判断加载对应的路由加载对应的组件

优点:

(1) 只需要前端配置路由表, 不需要后端的参与
(2) 兼容性好, 浏览器都能支持
(3) hash值改变不会向后端发送请求, 完全属于前端路由

缺点:

(1) hash值前面需要加#, 不符合url规范,也不美观

history模式:

原理:
利用了 HTML5 History Interface 中新增的 pushState() 和 replaceState() 方法。这两个方法应用于浏览器的历史记录栈，在当前已有的 back、forward、go 的基础之上，它们提供了对历史记录进行修改的 功能。只是前者是新增一个历史记录，后者是直接替换当前的历史记录

优点:

(1) 符合url地址规范, 不需要#, 使用起来比较美观

缺点:

(1) 在用户手动输入地址或刷新页面时会发起url请求, 后端需要配置index.html页面用户匹配不到静态资源的情况, 否则会出现404错误
(2) 兼容性比较差, 是利用了 HTML5 History对象中新增的 pushState() 和 replaceState() 方法,需要特定浏览器的支持.

22. 网页从输入网址到渲染完成经历了哪些过程？

1. 输入网址
2. 发送到DNS服务器 获取IP地址
3. 与服务器建立连接
4. 浏览器向服务器发送HTTP请求
5. web服务器响应请求
6. 浏览器收到收到返回的数据，并解析
7. 生成DOM树 解析标签，渲染页面

23. vuex
    vuex

24. vue挂载的过程

25. SPA单页面的理解

SPA（ single-page application ）仅在 Web 页面初始化时加载相应的 HTML、JavaScript 和 CSS。一旦页面加载完成，SPA 不会因为用户的操作而进行页面的重新加载或跳转；取而代之的是利用路由机制实现 HTML 内容的变换，UI 与用户的交互，避免页面的重新加载。

• 优点：

1. 用户体验好、快，内容的改变不需要重新加载整个页面，避免了不必要的跳转和重复渲染；
   基于上面一点，SPA 相对对服务器压力小；
2. 前后端职责分离，架构清晰，前端进行交互逻辑，后端负责数据处理；

• 缺点：

1. 初次加载耗时多：为实现单页 Web 应用功能及显示效果，需要在加载页面的时候将 JavaScript、CSS 统一加载，部分页面按需加载；
2. 前进后退路由管理：由于单页应用在一个页面中显示所有的内容，所以不能使用浏览器的前进后退功能，所有的页面切换需要自己建立堆栈管理；
3. SEO 难度较大：由于所有的内容都在一个页面中动态替换显示，所以在 SEO 上其有着天然的弱势。

25. vue错误信息的捕获

vue.config.errorHandler= ()=>{}

26.url解析过程

1. 浏览器解析url

浏览器会对我们输入的url进行解析，主要将其分为以下部分：协议、网络地址、资源路径。
其中网络地址指示该连接网络上哪一台计算机，可以是域名或者IP地址，可以包括端口号；协议是从该计算机获取资源的方式，常见的是HTTP，HTTPS，FTP等。不同协议有不同的通讯内容格式；资源路径指示从服务器上需要获取资源的具体路径。

这里浏览器对输入的url解析为如下内容：

url：https://www.jianshu.com/p/879fada10661

协议：https
网络地址（网站名）：www.jianshu.com
资源路径：/p/879fada10661

2. DNS域名解析

客户端收到你输入的域名地址后，它首先去找本地的hosts文件，检查在该文件中是否有相应的域名、IP对应关系，如果有，则向其IP地址发送请求，如果没有，再去找DNS服务器。

DNS服务器层级如下：

image

DNS查询的具体步骤如下：

1. 从浏览器缓存中查询。
   浏览器会存储一定时间的DNS记录，操作系统不会告诉浏览器每个DNS记录的保存时限，不同浏览器设置保存时限为一个固定值（不同浏览器情况不同，一般在2-30分钟）。
2. 从操作系统缓存中查询。
   如果浏览器中没有包含想要的缓存记录，那浏览器就会发起操作系统请求，继续查询操作系统缓存
3. 从路由器中查询DNS缓存。
   请求持续发送到你的路由，它通常会有自己的DNS缓存。
4. 从ISP中查询DNS缓存。
   下一个被查询地方是ISP缓存DNS的服务器。
5. 域名服务器迭代查询，根据返回的地址逐级向上查询。
   首先从root域名服务器中查询如.com域名服务器，然后逐步向前查询，.com顶级域名服务器到ruanyifeng的域名服务器。一般来说，.com级别的都已经在缓存中了，所以一般不会进行对root域名服务器的查询。下面给出一张迭代查询的图。

image

浏览器客户端向本地DNS服务器发送一个含有域名https://www.jianshu.com的DNS查询报文。
本地DNS服务器把查询报文转发到根DNS服务器，根DNS服务器注意到其com后缀，于是向本地DNS服务器返回comDNS服务器的IP地址。
本地DNS服务器再次向comDNS服务器发送查询请求，comDNS服务器注意到其https://www.jianshu.com后缀并用负责该域名的权威DNS服务器的IP地址作为回应。
最后，本地DNS服务器将含有https://www.jianshu.com的IP地址的响应报文发送给客户端。
从客户端到本地服务器属于递归查询，而DNS服务器之间的交互属于迭代查询。
正常情况下，本地DNS服务器的缓存中已有comDNS服务器的地址，因此请求根域名服务器这一步不是必需的。

3. 浏览器获取端口号

知道ip地址后，还需要端口号。http协议默认端口号是80。

4. TCP建立连接

IP和端口都有了，在http消息发送前，需要建立客户端与服务器的TCP链接，也就是进行所谓的三次握手。

TCP是因特网中的传输层协议，使用三次握手协议建立连接。
当主动方发出SYN连接请求后，等待对方回答SYN+ACK，并最终对对方的 SYN 执行 ACK 确认。这种建立连接的方法可以防止产生错误的连接，
TCP使用的流量控制协议是可变大小的滑动窗口协议。

image

TCP三次握手的过程如下：
a、客户端发送SYN（SEQ=x）报文给服务器端，进入SYN_SEND状态。
b、服务器端收到SYN报文，回应一个SYN （SEQ=y）ACK(ACK=x+1）报文，进入SYN_RECV状态。
c、客户端收到服务器端的SYN报文，回应一个ACK(ACK=y+1）报文，进入Established状态。

三次握手完成，TCP客户端和服务器端成功地建立连接，可以开始传输数据了。

5. 发送HTTP请求

经过三次握手之后，与服务器建立了连接后，就可以向服务器发起请求了。

image

6. 服务器处理请求

请求到达服务器之后，接下来服务器需要响应浏览器的请求。
服务器端收到请求后的由web服务器（准确说应该是http服务器）处理请求，诸如Apache、Ngnix、IIS等。web服务器解析用户请求，知道了需要调度哪些资源文件，再通过相应的这些资源文件处理用户请求和参数，并调用数据库信息，最后将结果通过web服务器返回给浏览器客户端。

下面以静态渲染的页面为例，ajax渲染不需要在服务器做页面数据写入

image

7. 返回响应结果

在HTTP里，有请求就会有响应，哪怕是错误信息。这里我们同样看下响应报文的组成结构：

image

在响应结果中都会有个一个HTTP状态码，比如我们熟知的200、301、404、500等。通过这个状态码我们可以知道服务器端的处理是否正常，并能了解具体的错误。
状态码由3位数字和原因短语组成。根据首位数字，状态码可以分为五类：

image

8. 关闭TCP连接

为了避免服务器与客户端双方的资源占用和损耗，当双方没有请求或响应传递时，任意一方都可以发起关闭请求。

建立一个连接需要三次握手，而终止一个连接要经过四次挥手，这是由TCP的半关闭（half-close）造成的。具体过程如下图所示。

image

(1) 某个应用进程首先调用close，称该端执行“主动关闭”（active close）。该端的TCP于是发送一个FIN分节，表示数据发送完毕。
(2) 接收到这个FIN的对端执行 “被动关闭”（passive close），这个FIN由TCP确认。
注意：FIN的接收也作为一个文件结束符（end-of-file）传递给接收端应用进程，放在已排队等候该应用进程接收的任何其他数据之后，因为，FIN的接收意味着接收端应用进程在相应连接上再无额外数据可接收。
(3) 一段时间后，接收到这个文件结束符的应用进程将调用close关闭它的套接字。这导致它的TCP也发送一个FIN。
(4) 接收这个最终FIN的原发送端TCP（即执行主动关闭的那一端）确认这个FIN。

既然每个方向都需要一个FIN和一个ACK，因此通常需要4个分节。

9. 浏览器加载解析渲染

客户端从浏览器内核拿到内容（渲染线程接受请求，加载网页并渲染网页），渲染大致可以划分为以下几个步骤：
1）解析css建立CSSOM Tree
2）解析html建立DOM树,并与CSSOM Tree合并为Render Tree
3）布局render树(Layout/reflow),负责各元素尺寸，位置的计算
4）绘制render树(paint),绘制页面像素信息
5）浏览器会将各层的信息发送给GPU（GPU进程最多一个，用于3D绘制等），GPU会将各层合成（composite）,显示在屏幕上。

简单版
分为4个步骤：

1. 当发送一个 URL 请求时，不管这个 URL 是 Web 页面的 URL 还是 Web 页面上每个资源的 URL，浏览器都会开启一个线程来处理这个请求，同时在远程 DNS 服务器上启动一个 DNS 查询。这能使浏览器获得请求对应的 IP 地址。
2. 浏览器与远程 Web 服务器通过 TCP 三次握手协商来建立一个 TCP/IP 连接。该握手包括一个同步报文，一个同步-应答报文和一个应答报文，这三个报文在 浏览器和服务器之间传递。该握手首先由客户端尝试建立起通信，而后服务器应答并接受客户端的请求，最后由客户端发出该请求已经被接受的报文。
3. 一旦 TCP/IP 连接建立，浏览器会通过该连接向远程服务器发送 HTTP 的 GET 请求。远程服务器找到资源并使用 HTTP 响应返回该资源，值为 200 的 HTTP 响应状态表示一个正确的响应。
4. 此时，Web 服务器提供资源服务，客户端开始下载资源。

27. apply，call，bind三者的区别

1. 三者都可以改变函数的this对象指向。
2. 三者第一个参数都是this要指向的对象，如果如果没有这个参数或参数为undefined或null，则默认指向全局window。
3. 三者都可以传参，但是apply是数组，而call和bind是参数列表，且apply和call是一次性传入参数，而bind可以分为多次传入。
4. bind 是返回绑定this之后的函数，便于稍后调用；apply 、call 则是立即执行 。

28. 浏览器渲染流程

浏览器内核拿到内容后，渲染大概可以划分成以下几个步骤：

1. 解析html建立dom树
2. 解析css构建render树（将CSS代码解析成树形的数据结构，然后结合DOM合并成render树）
3. 布局render树（Layout/reflow），负责各元素尺寸、位置的计算
4. 绘制render树（paint），绘制页面像素信息
5. 浏览器会将各层的信息发送给GPU，GPU会将各层合成（composite），显示在屏幕上。