day05

21. 虚拟 dom

操作真实 dom 的代价是很昂贵的，所以在 vue 中采取虚拟 dom 提高渲染效率，虚拟 dom 就是根据真实的 dom 所生成的一个 js 对象，这个对象里包含了这个 dom 节点的标签属性子元素等信息

优点:

保证性能下限： ⽐起粗暴的 DOM 操作性能要好很多，
⽆需⼿动操作 DOM： 我们不再需要⼿动去操作 DOM，可以以预期的⽅式更新视图，极⼤提⾼我们的开发效率；
跨平台： 虚拟 DOM 本质上是 JavaScript 对象，所以虚拟 DOM 可以进⾏更⽅便地跨平台操作

缺点:

⽆法进⾏极致优化： 虽然虚拟 DOM + 合理的优化，⾜以应对绝⼤部分应⽤的性能需求，但在⼀些性能要求极⾼的应⽤中虚拟DOM ⽆法进⾏针对性的极致优化。

⾸次渲染⼤量 DOM 时，由于多了⼀层虚拟 DOM 的计算，会⽐ innerHTML 插⼊慢

22. Vue 的 diff 算法原理是什么？

diff 算法，就是把新生成的虚拟 dom 和旧的虚拟 dom 进行对比，这个过程就是 diff 算法。

Vue 的 diff 算法是平级⽐较，不考虑跨级⽐较的情况。内部采⽤深度递归的⽅式+双指针⽅式⽐较
先⽐较两个节点是不是相同节点
相同节点⽐较属性，复⽤⽼节点
先⽐较⼉⼦节点，考虑⽼节点和新节点⼉⼦的情况
优化⽐较：头头、尾尾、头尾、尾头
⽐对查找，进⾏复⽤

23. 说⼀下你对 keep-alive 的理解?以及在项⽬中如何使⽤?

keep-alive 是vue一个内置组件，作用是缓存不活动的组件不被销毁，下次访问这个组件的时候不会重新加载而是从缓存里拿。

比如说刚填好的表单需要缓存，还有保持滚动条的距离。

keep-alive 的黑白名单：可以用 include 和 exclude 规定缓存谁不缓存谁，也可以使用路由的元信息定义
跟他相关的两个钩子函数： actived 和 deactived

举例：保持滚动条的距离：

给 router-view 外层套一个 keep-alive
在想要保持滚动条的页面的 beforeRouteLeave 上拿到当前滚动条的距离，
在 actived 里面 赋值给页面的滚动条
拿滚动条或者赋值滚动条都是 document.documentElement.scrollTop

24. 插槽

插槽分为 匿名插槽、具名插槽和作用域插槽

匿名插槽指的是不起名字的插槽
具名插槽是起了具体名字的插槽，v-slot 也可以简写为#起名字，用 slot 的时候加上 name 属性区分名字
作用域插槽是把子组件里的数据拿到父组件的插槽位置那里使用，在子组件通过自定义属性传 在父组件插槽那里通过 v-slot=“”起个名字接收

匿名插槽和具名都用的很多
比如在封装头部子组件的时候 中间的标题每个页面都不一样，就可以用插槽表示
在封装弹框子组件的时候，弹框里的内容也可以用插槽表示

25. axios 的封装

1. 先建一个 utils 文件夹，里面放 request.js 文件

2. 在 request.js 文件用 create 方法创建 axios 实例，并且设置基本路径和超时时间

3. 设置请求拦截和响应拦截

4. 在请求拦截的成功的回调函数里，设置 token 以及 全局的 loading

5. 在响应拦截的成功回调函数里，清除 loading 以及根据 返回的编码做一个处理

6. 在响应拦截的失败的回调里，做错误编码处理

7. 再创建一个 api.js 统一管理我们的接口

26. 拦截器

axios 拦截器是 axios 给我们提供的两个⽅法，通过这两个⽅法我们可以对请求发送之前以及响应之后进⾏逻辑的再次处理(拦截)。这两个拦截器不需要⼿动触发，只要发送 http 请求的时候就会⾃动触发。 我在项⽬中经常通过拦截器发送 token, 对token 进⾏过期处理，以及进⾏其他的⼀些操作。

27. vue 本地的跨域、代理跨域、proxy

本地跨域是通过在 vue.config.js ⽂件⾥⾯的 devServer 属性⾥⾯的 proxy 属性⾥⾯配置，⼀共配置三个属性，分别是代理名称 代理地址 开启跨域 重写路径。

28. Vue.use 是⼲什么的？

vue.use 是⽤来使⽤插件的。我们可以在插件中扩展全局组件、指令、原型⽅法等。 会调⽤ install ⽅法将 Vue 的构建函数默认传⼊，在插件中可以使⽤ vue，⽆需依赖 vue 库。

29. 组件写 name 有啥好处？

增加 name 属性，会在 components 属性中增加组件本身，实现组件的递归调⽤。

可以表示组件的具体名称，⽅便调试和查找对应的组件。