Vue —— 面试相关记录（一）

一. vue-router 两种模式的区别？

核心答案：
vue-router 有 3 种路由模式：hash、history、abstract。

1. hash模式：hash + hashChange
   特点：hash虽然在URL中，但不被包括在HTTP请求中；用来指导浏览器动作，对服务端安全无用，hash不会重加载页面。通过监听 hash（#）的变化来执行js代码 从而实现 页面的改变。

   核心代码：

   window.addEventListener(‘hashchange‘,function(){
   self.urlChange()
   })

2. history模式：historyApi + popState
   HTML5推出的history API，由pushState()记录操作历史，监听popstate事件来监听到状态变更；

   因为 只要刷新 这个url（www.ff.ff/jjkj/fdfd/fdf/fd）就会请求服务器，然而服务器上根本没有这个资源，所以就会报404，解决方案就 配置一下服务器端。

   说明：
   1）hash: 使用 URL hash 值来作路由。支持所有浏览器，包括不支持 HTML5 History Api 的浏览器；
   2）history : 依赖 HTML5 History API 和服务器配置。具体可以查看 HTML5 History 模式；
   3）abstract : 支持所有 JavaScript 运行环境，如 Node.js 服务器端。如果发现没有浏览器的 API，路由会自动强制进入这个模式.

二、 Vue中key的作用和工作原理，说说你对它的理解

核心答案：
例如：v-for="(item, itemIndex) in tabs" :key=“itemIndex”

key的作用主要是为了高效的更新虚拟DOM，其原理是vue在patch过程中通过key可以精准判断两个节点是否是同一个，从而避免频繁更新不同元素，使得整个patch过程更加高效，减少DOM操作量，提高性能。

补充回答：

1、若不设置key还可能在列表更新时引发一些隐蔽的bug
2、vue中在使用相同标签名元素的过渡切换时，也会使用到key属性，其目的也是为了让vue可以区分它们，否则vue只会替换其内部属性而不会触发过渡效果。

三、 Vue 中的diff原理

核心答案：

vue的diff算法是平级比较，不考虑跨级比较的情况。内部采用深度递归的方式 + 双指针的方式进行比较。

补充回答：

1. 先比较是否是相同节点

2. 相同节点比较属性，并复用老节点

3. 比较儿子节点，考虑老节点和新节点儿子的情况

4. 优化比较：头头、尾尾、头尾、尾头

5. 比对查找进行复用

Vue2 与 Vue3.x 的diff算法：

Vue2的核心Diff算法采用了双端比较的算法，同时从新旧children的两端开始进行比较，借助key值找到可复用的节点，再进行相关操作。

Vue3.x借鉴了ivi算法和 inferno算法，该算法中还运用了动态规划的思想求解最长递归子序列。(实际的实现可以结合Vue3.x源码看。)

四、 请说一下响应式数据的理解？

核心答案：根据数据类型来做不同处理，数组和对象类型当值变化时如何劫持。

1. 对象内部通过defineReactive方法，使用 Object.defineProperty() 监听数据属性的 get 来进行数据依赖收集，再通过 set 来完成数据更新的派发；

2. 数组则通过重写数组方法来实现的。扩展它的 7 个变更⽅法，通过监听这些方法可以做到依赖收集和派发更新；( push/pop/shift/unshift/splice/reverse/sort )

这里在回答时可以带出一些相关知识点 （比如多层对象是通过递归来实现劫持，顺带提出vue3中是使用 proxy来实现响应式数据）

补充回答：

内部依赖收集是怎么做到的，每个属性都拥有自己的dep属性，存放他所依赖的 watcher，当属性变化后会通知自己对应的 watcher去更新。

响应式流程：
1､defineReactive 把数据定义成响应式的；

2､给属性增加一个 dep，用来收集对应的那些watcher；

3､等数据变化进行更新

dep.depend() // get 取值：进行依赖收集
dep.notify() // set 设置时：通知视图更新

这里可以引出性能优化相关的内容：1)对象层级过深，性能就会差。2)不需要响应数据的内容不要放在data中。3)object.freeze() 可以冻结数据。