

# 视频格式
常见的视频格式有`MKV` `MP4` `AVI` `RMVB`

## 一些容器格式
- MKV
   - 优点：“肚量大”，支持各种编码 多音轨 多字幕
   - 缺点：`Premiere`等剪辑软件不支持`mkv`
   - <img src='https://blog.warmplace.cn/static/img/af685dc23eac2a710aea49f12f993c7a.image.webp' width=200>
- mp4 
   - 对剪辑软件比较友好
   - 缺点支持的编码格式有限
- webm
   - 支持`vp9`、`opus`等编码，`youtube`的在线格式之一
- `flv` 通常是`H.264+ACC`编码，国内在线视频网站常用的格式


![image.png](https://blog.warmplace.cn/static/img/176232a1c7d5b4624ccb853df439dda4.image.webp)


## 编码标准与编码器
不同的编码格式对视频质量和压缩率有很大的影响<br>
对于`mp4`使用最广泛的视频编码格式是`H264` `FFmpeg`默认选择的就是它<br>
- `H.264`标准
   - `x264 Encoder`  	纯`CPU`编码
   - `h264_nvnev` 	使用`nvidia`显卡编码
   - `h264_qsv`		使用`intel`核显编码
- `H.265`标准
- `VP9`

相对于`H.264`，`H.265`和`VP9`有着更高的压缩率，但考虑硬件支持度、编码效率、使用许可等限制，目前应用最广泛的视频编码后依然还是`H264`。如B站上的绝大多数视频都是用`H264`编码的

TODO 为什么压缩算法受限于显卡支持？

# 如何压缩视频？
-- 既要压缩文件大小，又要肉眼看不出来画质的变化<br />
压缩视频主要从三个方便下手 **分辨率** **帧率** **码率**<br />
先来说结论

- 降低分辨率
- 降低帧率
- 使用更高级的算法进行图片编码和视频编码

## 1.使用更高级算法
   - `HEIF`拍摄的照片，保持同样质量的前提下，比常用的`JPEG`格式的图片体积小很多
   - 使用`HEVC（H265）`拍摄和压制的视频，在同样质量的前提下，也比传统的`H.264`编码的体积更小
   - 压缩越多所消耗的算力也要更多，也就有了兼容性问题
   - ![image.png](https://blog.warmplace.cn/static/img/e5fffa3687a369c6988039552283c61d.image.webp)

## 2. 降低分辨率和帧率

![image.png](https://blog.warmplace.cn/static/img/e9237a93905cea5fb252c98b407a6d9a.image.webp)

分辨率

![image.png](https://blog.warmplace.cn/static/img/34b7ca85f4c856c3d42cd77c90f8c45f.image.webp)
- 分辨率越大占用磁盘空间越大
- 帧率越大占用磁盘空间越大

<img src='https://blog.warmplace.cn/static/img/c4924554f4c1fbe857d9604c38e136cb.image.webp' width=400>

分辨率帧率能调整的幅度有限<br />
一般分辨率不小于720P 否者视频不清晰<br />
帧率不小于24帧否则会感到卡顿

## 3. 降低码率
1. 视频中通常相邻的图片相似度很高，为了更好的压缩，只存储关键帧的完整内容，其它帧只记录与关键帧的差异。
2. 码率是指单位时间视频中关键帧的数量
 
码率一般要通过播放器才能看到<br />
<img src='https://blog.warmplace.cn/static/img/c75e763f693a63947092c49f721fdb1a.image.webp' width=200>
<img src='https://blog.warmplace.cn/static/img/3eaae5810649ba44eeccac5f127afdf3.image.webp' width=400>

通常来说码率越高画质越清晰，但是有一个临界值<br />

![image.png](https://blog.warmplace.cn/static/img/d2026acb15bb8b993d9f59172634fe9a.image.webp)

那么码率设置到多少合适呢？可以参考一些视频网站<br />

![image.png](https://blog.warmplace.cn/static/img/30d758f67764bb7c637e37d70d95f52c.image.webp)

用手机录制的1080P 码率可能达到23Mps，这也是为什么手机拍摄的视频都很大

推荐视频码率 1080P 大于6Mbps  4K 大于20Mbps

注意：码率只能从高到低压缩

字节换换算成比特 $1MB = 8Mb$

1920*1080的图片未压缩大小为 5.9MB

![image.png](https://blog.warmplace.cn/static/img/dc62d3237698594b749d1e79a41d9d4a.image.webp)

如果还想压缩可以选择更改视频编码方式

根据视频大小和时长是可以计算出码率<br>
$视频大小/时长（秒）*8$

码率是什么？

单位时间内视频所包含的数据信息

码率高就代表视频里给算法还原的关键帧图片数量多质量好，相应的是视频的质量好文件质量也更大，**压缩视频就是降低码率**

![image.png](https://blog.warmplace.cn/static/img/5aa69e9590e7512155b2f7e1c5f7d681.image.webp)

## TODO 

同样的码率 是 1080P的画质更好 还是720P的画质更好？<br />
为什么有的视频通过编辑软件导出后，体积反而变得更大了？<br />
为什么视频播放的时候清楚，暂停播放的时候就模糊了？<br />
为什么有的视频任务静止的时候清晰，动起来就模糊？<br />
提升编码时间，可以弥补码率降低带来的质量损失吗？<br />
高码率不等于高质量，低码率一定是低质量，为什么？

- 视频编解码IBP帧 [https://zhuanlan.zhihu.com/p/34162672](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbDlWUGxmQ2QtWll3V1BmdDJBZHRkSlBlR1drUXxBQ3Jtc0ttZndWc0Fkbi1TejZSWGVYeTdHcHAyRGoyVGR2RFpjejJXaFNkNFVDTEktWlpmcXVERDA1cF9QV2tmd3hpSmtNQ1NrLXIxckoybW9pbERxYTUxTllHdms5VkdNaE5wbG1aY1FxY0FvdVN3am52SXRIRQ&q=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F34162672&v=0LSHhatwTxM) 
- 你知道H.264和H.265究竟区别在哪吗？[https://www.sohu.com/a/224199309_825275](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbGlKbmNzeWFFRGVYd1lIM2VrRG5FVW9zMG1aUXxBQ3Jtc0tueVdQa0lkNWVJaTNTQ3VSYUNncjBpLUFpOE9vR0ExMWFXaUM1SXZCMzJDeUFNODNpYllWcmJnbUVXRUhtamdWc2NXVjdFU0JDOUZRQ3NETmpXendQdVJuRUFJSlViN21STEZFdG1pY3lJekFCeHpWTQ&q=https%3A%2F%2Fwww.sohu.com%2Fa%2F224199309_825275&v=0LSHhatwTxM) 
- 视频编码码率控制：CBR、VBR和ABR： [https://zhuanlan.zhihu.com/p/189497566](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbVZyRjFmb3o2WFB5MVV4RHJDZXVIZnpSSFlhUXxBQ3Jtc0trejNIRzhQSldpU1JYdG53d0hnSjdvMmdaR3d0YkZDNUJ6OVZELUloQi1GbU14bGRyRHRpT21hUUJxN1pqdjBpYVFUQ0pVMG0wMFpPcjNjUjg3ZnlaWmxmb24zenh1YXJJcWgteHJhbnpRNEtXRjc1bw&q=https%3A%2F%2Fzhuanlan.zhihu.com%2Fp%2F189497566&v=0LSHhatwTxM) 
- 视频音频格式基础知识 [https://vcb-s.nmm-hd.org/Twilight%20C...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqa2RoOXo1RUpuRHdINVJ4QzVFdmdxR3V4WjRNUXxBQ3Jtc0tscU9CcFRZWlE2aVRGY3ZNalRXY3VaUTRFTHRXb1JVRlcxTnIza2poRVZjSENzZll0dnE0ZVdHNDRLLU5GT1A1emEzNl9xaTVPQzZpcjhpVXNQczY3My14R2hfTnhJOTF3WGhpZEhHYV9obi1MLW9hTQ&q=https%3A%2F%2Fvcb-s.nmm-hd.org%2FTwilight%2520Council%2F&v=0LSHhatwTxM) 
- 视频码率对视频质量有何影响？画面质量一定和码率成正比吗？ [https://www.bilibili.com/read/cv12243628](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbV9ZT3BXV2IzQ09EZjQtdE5XTDBGN0ljQU9OZ3xBQ3Jtc0tsUjJHQTFYQ3Q3TTRQQjA2OXpTc0hJLXFsYThqV1ZvSWNqcTFrSS1WbU5mbkdMNkd1RlJjWkRvdWxYR0hUdkhlckFWZDZXd2RVQnNnNnVkT3EtY2Y2QjFweDUxay1YSHJ4QlhGNnFhOXhUMi1rMTVRWQ&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv12243628&v=0LSHhatwTxM) 
- 简单整理一下x264参数 [https://www.bilibili.com/read/cv49107...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbEt0MHUxTDdBWl91VGN0Nm9rNm9OdnRjd091d3xBQ3Jtc0ttUHdDRlIyUldkRXlhc2xvZk9tTVMtbk8tOUJLaHZfQkdxajV2cjFoeXg4bm9qbXFmZGN3eTZLUnkyREY3RkR0OFE1Z3c3R1cxV1h3WkVpVHFVOTVaZ19CbTNfeExCSVdCTl95UUlhQ0MzdUFVLU81dw&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv4910766%3Fspm_id_from%3D333.999.0.0&v=0LSHhatwTxM) 
- 视音频编解码技术零基础学习方法 [https://blog.csdn.net/leixiaohua1020/...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbjBDSW13bEFsRy1VeF9pYXJ4R21yS3JINmRKd3xBQ3Jtc0ttNUF2U0FqTzMyaTlNSmxNOWVQbm5XTUJIaWE5LVFTVGRySE5FZ215d1h1MEFNYU12MU5pTWplRER6UE1MYzhINTB1dDlUb21IekMtYWR6a25kRkNfalJSMUM0RkgtU2g0LVFXOUdGXzV1TnM0bmU1aw&q=https%3A%2F%2Fblog.csdn.net%2Fleixiaohua1020%2Farticle%2Fdetails%2F18893769&v=0LSHhatwTxM) 
- 关于影片压制的视频码率配置参数的小结 [https://www.bilibili.com/read/cv13143006](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbXA5enpwbGZmUE4zOVZVUmtUQTAtLVlXRllJQXxBQ3Jtc0trVUxzdm51ZFpLU1lLa2d1bW1NR2RuWFBDV3ZicmtQSFNEUkRjaFE5OGdCV09Tcm5jRHBWbG1hMTAxbEJkQXBtUlY2ZWV0Tm10dEZPMXM2UDRjb2hmbEFXcFhGZWRHSkl4VE80NWNNWFA0RXEwcUI1UQ&q=https%3A%2F%2Fwww.bilibili.com%2Fread%2Fcv13143006&v=0LSHhatwTxM) 
- IP 视频的比特率控制 [https://www.axis.com/filessaleswhite_...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqazB5cGp6SFh2aDVXblA5RDFNN0ZFc0NMbGtZQXxBQ3Jtc0trQVJ1SWUzWVhZeFlrUGRNNnVSMWF6a190blFheVRpdUdSZ2FveHQyT1BMTU9xZGQ2V2V0NTUwXzZyeC1DY0xPb1NwRE03YnpxTzhNU3c3R2hjaU41QlgwdVZpZW56RDNUSEZWSEx4X2ktQ2dqeEJsOA&q=https%3A%2F%2Fwww.axis.com%2Ffilessaleswhite_paper_bitrate_control_for_ip_video_zh_2109.pdf&v=0LSHhatwTxM)
- JPEG压缩原理与DCT离散余弦变换 [https://blog.csdn.net/newchenxf/artic...](https://www.youtube.com/redirect?event=video_description&redir_token=QUFFLUhqbDE4aGhJeURoVmRGT0IyV2pfRDFVMmlSb2lrQXxBQ3Jtc0tscUhVY0p2R1YxeWdFbEF1c0RLTGlpcUlHMk9hdFVLdzlfd1NMUG56amJiTWstMnpZMm1UU2p5bVZJT1pEMEVEWXVGZV9PbGZFSHdycDdURTVENC1QR28zR0dpak9aZWxCNzlfTG05dEk4cW1qRnBBUQ&q=https%3A%2F%2Fblog.csdn.net%2Fnewchenxf%2Farticle%2Fdetails%2F51719597&v=0LSHhatwTxM)


浅谈视频格式与压缩

微前端框架qiankun

本文处于草稿状态， 初步介绍了Vite的架构思路， 后续有时间还会深入研究



# 为什么选Vite
[官方文档](https://cn.vitejs.dev/guide/why.html#the-problems)
## 传统构建工具的问题
- 随着发展构建越来越大的大型应用，`JS`代码指数增长，`webpack`、`rollup`还是存在一些问题（启动慢、热替换慢）
- `Vite`宗旨： 利用生态系统的新进展解决解决上述问题。

## Vite的解决方案
1. 对于启动缓慢的解决
- 将模块区分为依赖和源码两部分， 使用**esbuild预构建**，它比原生JS构建快10-100倍
- 源码 则基于ESM特性懒解析，实际上浏览器也接管了打包部分工作

2. 缓慢更新的解决方案
- 模块热替换是在原生ESM上执行的
- 充分利用协商缓存（源码）和强缓存（依赖）

## 为什么ESBuild快？
![image.png](https://blog.warmplace.cn/static/img/131b8805ea939ec7542470fd42f82533.image.webp)
- 使用**Go语言编写**的，**可以直接转换成机器代码，无需经过字节码**
- ESBuild可以充分利用**CPU的多内核**，尽可能让他们饱和运行
- ESBuild的所有内容都是**从零开始编写**的，而不是使用第三方，所以**一开始就考虑了各种性能问题**

:::tip{title=注意}
vite并没有说它打包快， 因为生产环境它使用的是`rollup`
:::

# Vite打包方案
为什么生产环境仍需要打包<br>
ESM大量碎片代码的网络往返，致使其效率仍然低下， 还是需要对代码进行 `tree-sharking`、懒加载、`chunk分割` 以获得更好的缓存

为什么不使用ESbuild打包？
`Vite`的插件与使用`esbuild`作为打包起并不兼容。尽管 `esbuild` 速度更快，但 `Vite` 采用了 `Rollup` **灵活的插件 API 和基础建设**，这对 `Vite` 在生态中的成功起到了重要作用。

<img width=300 src='https://blog.warmplace.cn/static/img/b80bd7859fc9f49519057818a164fce6.image.webp'>

:::tip{title=注意}
由于开发模式和生产模式使用不同的工具 所以Vite要兼容一套配置在开发环境和生产环境保持一致
:::

**Vite的组成**
`vite`由两部分组成
1. 一个开发服务器，它基于原生`ESM`提供了丰富的内置功能，`HMR`的速度非常快速
2. 一套构建指令，开发环境使用esbuild，生产使用`rollup`打包，并且它是预配置的，可以输出生产环境优化过的静态资源

# Vite的简单使用
Vite 意在提供**开箱即用的配置**，同时他的插件API和JavaScript API带来了高度的可扩展性，并有完整的类型支持。

- `npm create vite@latest`
- <img width=300 src='https://blog.warmplace.cn/static/img/54e4203b41533d48c0caca77996a650b.image.webp'>
- `cd vite-project && npm i`
- `npm run dev`


## 零配置
- 无需任何配置即可支持 `TS`/`图片` 的支持
- 无需任何配置即可支持 CSS相关 `less` `scss`   (但需要安装对应的开发依赖)
- 无需任何配置即可支持`postcss`
- 无需任何配置即可支持`jsx` (react/react-dom是开发依赖)
- 需要配置`plugin` `vitejs-plugin-vue2` 支持`vue2`
- 需要配置`plugin` `@vitejs/plugin-vue` 支持`vue3`

[以上案例点击这里](https://github.com/guojingwen/frontend-project/tree/main/vite_study/vite-project)

**命令**<br />
`"dev": "vite"`,<br />
`"build": "tsc && vite build"`,<br />
`"preview": "vite preview"` 生产模式预览

:::tip{title=思考：vite有哪些缺点？}
- 由于开发不模式没有babel补丁，对于复线生产兼容性问题比较麻烦， 需要 使用 `preview`模式
- 开发环境中，如果我们修改了node_modules下面的文件如果不生效，需要情况浏览器缓存或勾选disable-catch
:::

## vite的配置项和 webpack很像
todo

# 参考资料
- 官网
- [Vite的前世今生](https://juejin.cn/post/7240740177449435191)

Vite学习笔记

记录Vue2常见问题


# Vue通信有几种方式
1. 父子组件通信`props` `$emit`
2. 当嵌套层级比较多 使用 `provide`/`inject` 或者 `element-ui`的广播`broadcast`/`dispatch`
3. 非嵌套关系 用 事件总线 即`EventEmmitter`机制, 在复杂一些可以用`tapable`
```js
Vue.$prototype.$bus = new Vue();
this.$bus.on() // 监听
this.$bus.emit() // 触发
```
4. 自己实现一个发布订阅模式
5. `$refs`、`$parent`、`$children`、`$attrs`、`$listeners` 也算  不推荐，存在耦合
6. `Vuex`

# 说一下scoped Css
当 `<style>` 标签有 `scoped` 属性时，它的 `CSS` 只作用于当前组件中的元素。<br>
其原理是通过使用 `PostCSS` 来实现以下转换：
```html
<template>
  <div class="red" data-v-f3f3eg9>hi</div>
</template>

<style>
  .red[data-v-f3f3eg9] { color: red; }
</style>
```
1. 作用范围： 当前组件中的元素及子组件根元素样式
2. 如果想覆盖子元素的样式 使用 深度作用选择器
 - css `>>>`
 - scss `/deep/` or `::v-deep`

# 对Vue设计原则的理解
1. **渐进式JavaScript框架**
    - 与其它大型框架不同的是，Vue 被设计为可以**自底向上逐层应用**。**Vue的核心库只关注视图层**，不仅易 于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使 用时，Vue 也完全能够为复杂的单页应用提供驱动。
2. **易用、灵活和高效**
    - 易用性 vue提供**数据响应式**、**声明式模板语法**和**基于配置的组件系统等核心特性**。这些使我们只需要关注应用 的核心业务即可，只要会写js、html和css就能轻松编写vue应用。
    - 灵活性 渐进式框架的最大优点就是灵活性，如果应用足够小，我们可能仅需要vue核心特性即可完成功能；随着应用规模不断扩大，我们才可能逐渐引入路由、状态管理、vue-cli等库和工具，不管是应用体积还是 学习难度都是一个逐渐增加的平和曲线。
  c. 高效性 超快的虚拟 `DOM` 和 `diff` 算法使我们的应用拥有最佳的性能表现。追求高效的过程还在继续，`vue3`中引入`Proxy`对数据响应式改进以及编译器中对于静态内容编译的改进都会让vue更加高效。

# 对Vue组件化的理解
1. 组件是独立可复用的代码组织单元。组件系统是Vue核心特性之一 
2. 组件化开发能大幅提高应用开发效率、测试性、复用性等；
3. 组件使用按分类有：页面组件、业务组件、通用组件；合理的划分组件，有助于提升应用性能；
4. vue的组件是基于配置的，我们通常编写的组件是组件配置而非组件，框架后续会生成其构造函数，它们基于VueComponent，扩展于Vue；
5. vue中常见组件化技术有：属性prop，自定义事件，插槽，mixins、指令等，它们主要用于组件通信、扩展等；
6. 组件应该是高内聚、低耦合的；
7. 遵循单向数据流的原则。
8. 组件创建顺序自上而下 ，组件挂载顺序自下而上


# Vue组件data为什么必须是个函数而Vue的根实例则没有此限制？
1. Vue组件可能存在多个实例，如果使用对象形式定义data，则会导致它们共用一个data对象，那么状态变更将会影响所有组件实例，这是不合理的；采用函数形式定义，在initData时会将其作为工厂函数返 回全新data对象，有效规避多实例之间状态污染问题。
2. 而在Vue根实例只能有一个，所以不需要担心这种情况。

# watch与computed异同
1. api方面
    - `computed` 参数可以是函数或对象，如果是函数转换为对象的存值器，返回一个值
    - `watch`  参数可以是函数或对象，函数会转换为对象`{immediate: false, deep: false}`
2. 功能方面
    - computed不支持异步，有缓存作用；
    - watch没有缓存、支持异步操作
3. 使用场景
    - 有多个值到一个值用 computed 
    - 处理副作用异步操作使用 watch

# nextTick的实现原理
1. Vue的nextTick其本质是对JavaScript执行原理EventLoop的一种应用。<br>nextTick的核心是利用Promise、MutationObserver、setImmediate、setTimeout原生方法来模拟宏微任务的实现。
2. 引入nextTick的原因是避免强制布局（同步执行访问dom），提升性能

# Vue中的路由钩子有那些
1. 全局钩子函数
    - `beforeEach (to，from，next)`  常用于登录权限相关验证
        -  `next`：路由控制参数
        -  `next()`：如果一切正常，则调用这个方法进入下一个钩子
        -  `next(false)`：取消导航（即路由不发生改变）
        -  `next('/login')`：当前导航被中断，然后进行一个新的导航
        -  `next(error)`：如果一个`Error`实例，则导航会被终止且该错误会被传递给`router.onError()`
    -  `afterEach(to，from)` 路由改变后的钩子
2. 路由配置中的钩子
    - `beforeEnter(to, from, next)`
3. 组件内的钩子函数
    - beforeRouteEnter (to,from,next)
        - 方法内部不能访问`this` ，如果想使用`this`则在`next`方法回调里使用 
    - `beforeRouteUpdate (to,from,next)`
    - `beforeRouteLeave (to,from,next)`
4. 路由监测变化
    - watch  '$route'

# Vuex 严格模式及Plugin
- 开启严格模式 `strict: true` 直接修改`state`会控制台报红
- 使用插件 `plugin: [myPlugin]`
```ts
export default store => {
  // 初始化时从localStorage获取数据 
  if(localStorage) {
    const user = JSON.parse(localStorage.getItem('user'))
    if (user) {
      store.commit('user/login')
      store.commit('user/setUsername', user.username)
    }
  }
  // 用户状态发生变化时缓存之 
  store.subscribe((mutation, state) => {
    if (mutation.type.startsWith('user/')) { 
      localStorage.setItem('user', JSON.stringify(state.user)) 
    } else if (mutation.type === 'user/logout') {
      localStorage.removeItem('user') 
    } 
  }) 
}
```

# Vue中key的作用
1. `key`的作用主要是为了高效的更新`VDOM`，其原理是`vue`在`patch`过程中通过`key`可以精准判断两 个节点是否是同一个，从而避免频繁更新不同元素，使得整个`patch`过程更加高效，减少`DOM`操作量，提高性能。
2. 另外，若不设置`key`可能引发一些隐蔽的`bug` 如列表更新或相同标签名元素的过渡切换

# Vue.mixin合并策略
- 优先级 组件自身 >  组件混入 > 全局混入
- 执行顺序 全局混入 、组件混入、组件自身
- 默认策略
  - 数据对象在内部会进行递归合并，相同属性会覆盖
  - 同名钩子函数将合并为一个数组，因此都将被调用。
  - 值为对象的选项，例如 methods、components 和 directives，将被合并为同一个对象，同名会覆盖

# Vue为什么要求组件模板只能有一个根元素
1. `new Vue(el:'#app')` 只能指定一个入口
2. 单文件组件中，`template`下的元素`div`。其实就是"树"状数据结构中的"根"。
3. `diff`算法要求的



# Vue中的性能优化方式
1. 懒加载， 路由懒加载， 组件懒加载么， 三方组件按需引入，图片懒加载
2. 长列表性能优化
如果只是纯数据展示不发生改变，可以不做响应式
```js
export default {
  data() => ({
    list: []
  }),
  async created() {
    const list = axios.get('/api/list');
    this.list = Object.freeze(list);
  }
}
```
如果是大数据长列表，可采用虚拟滚动，只渲染少部分区域的内容<br>
参考[vue-virtual-scroller](https://github.com/Akryum/vue-virtual-scroller)、[vue-virtual-scroll-list](https://github.com/tangbc/vue-virtual-scroll-list)
```html
<recycle-scroller 
 class="items" 
 :items="items" 
 :item-size="24" 
>
 <template v-slot="{ item }"> 
   <FetchItemView
     :item="item"
     @vote="voteItem(item)" 
   />
 </template>
</recycle-scroller>
```
3. 事件的销毁
  - Vue 组件销毁时，会自动解绑它的全部指令及事件监听器，但是仅限于组件本身的事件。
  - 定时器要销毁
  - 总线通信注意销毁
4. 无状态的组件标记为`functional`
```html
<template functional> 
 <div class="cell">
   <section v-else class="off"></section> 
 </div>
</template>
<script>
export default { 
    // 无状态组件不能有props和data
  // props: ['value']
}
</script>
```
5. 子组件分割
```html
<template> 
 <div>
   <ChildComp/> 
 </div>
</template>
<script>
export default {
 components: {
   ChildComp: {
     methods: {
       heavy () { /* 耗时任务    */ }
     },
     render (h) {
        return h('div', this.heavy())
     }
   }
 }
}
</script>
```
6. 重复利用 `key`  
7. `v-show`与`v-if`
8. `keep-alive`合理使用
9. 用`computed`替代`method` 或 `watch`
10. 使用`is`动态组件

# Vue递归组件的使用
递归与不同组件使用无异，唯一要注意的是递归首要考虑终止条件，那递归组件必须与`v-if`配合使用

# Vue的插槽

|  | 父组件中定义 | 子组件中使用 |
| --- | --- |--- |
| 默认插槽 | `<template v-slot>`<br>可简写`<my-comp v-slot>` | `<slot>` |
| 具名插槽 | `v-slot:header` | `<slot name='footer'/>` |
| 作用域插槽 |`v-slot:default="slotProps"`  | `<slot v-bind:user='user'>{{user.name}}</slot>` |

- 插槽的作用域在当前组件
- 后备内容`<slot>后备内容</slot>`

# Vue组件与WebComponent异同
[以下内容摘抄自官网](https://cn.vuejs.org/guide/extras/web-components.html)

我们认为Vue和WebComponents是互补的技术。可以把自定义元素继承到Vue应用中，也可以使用Vue来构建和分发自定义元素。

自定义元素和Vue组件的相同点
- 数据传递、事件发射、生命周期管理的可重用组件。

但是Vue组件显然更强大一下
- 一个声明式、高效的模版系统
- 一个响应式的，利于跨组件逻辑提取和状态管理系统
- SEO方面Vue组件更高效
- 其他： Vue支持作用域插槽，WC没有该功能


# vue异步组件
```js
components: {
  'async-com': () => ({
    component: new Promise(resolve => {
        setTimeout(() => {
          resolve(import('./components/AsyncComp.vue'))
        }, 2000)
    }),
    loading: LoadingComp,
    error: ErrorComponent,
    // error: {render: () => h('div', 'error')}
    timeout: 3000,
    delay: 200,
    timeout: 3000
  })
}
```

# vue2错误处理
1. 全局错误处理
```js
Vue.config.errorHandler = function (err, vm, info) {
  // 可以捕获的错误
  // 1. 组件生命周期钩子里的错误  2.2.0+
  // 2. 捕获 Vue 自定义事件处理函数内部的错误  2.4.0+
  // 3. 会捕获 v-on DOM 监听器内部抛出的错误 和 Promise 错误 2.6.0+ 
}
```
2. 组件错误处理  `errorHandler(err: Error, vm: Component, info: string) => ?boolean`

在捕获一个来自后代组件的错误时被调用。 可以通过返回 `false` 阻止事件的传播

# vue2 keep-alive的缓存策略
LRU：Least Recently Used，最近最少使用算法

[代码实现](https://static.warmplace.cn/blog-resources/computed/cache_algorithm/LRU.ts)

# Vue生命周期
- `beforeCreate`之前做的事情
    - `initLifecycle()` 创建`$parent` `$children`
    - `initEvents()` 事件监听
    - `initRender()` 渲染模版
- `beforeCreate`之后做的事情
    - `initInjections()`
    - `initState`
    - `initProvide`
-  `keep-alive`钩子
    -  `activated`
        -  调用时机为首次挂载
        -  以及每次从缓存中被重新插入时
    -  `deactivated`
        -  在从 DOM 上移除、进入缓存
        -  以及组件卸载时调用


<img src='https://blog.warmplace.cn/static/img/b328a869e4a6c5eaee991260dcfde147.image.webp' width=300>

# Vue3 新特性
根据尤大的PPT总结，Vue3.0改进主要在以下几点：

1. 更快
    - 虚拟DOM重写  Diff算法优化一方面更符合业务诉求另一方面利用最大上升子序列尽可能减少dom的移动
    - 优化slots的生成
    - 静态树提升
    - 静态属性提升
    - 基于Proxy的响应式系统 惰性劫持
2. 更小：通过摇树优化核心库体积 
3. 更容易维护：`TypeScript` + 模块化 
4. 更加友好
    - 跨平台：编译器核心和运行时核心与平台无关，使得Vue更容易与任何平台（Web、Android、iOS）一起使用  (依赖注入的思想)
5. 更容易使用
    - 改进的TypeScript支持，编辑器能提供强有力的类型检查和错误及警告 
    - 更好的调试支持
    - 独立的响应化模块 
    - `Composition API` 关注点分离 `useXXX` 优于 `mixins`


vue2 也提供了一些方法来避免OptionsAPI天生的逻辑碎片化
如下示例
```js
mounted: function () {
  var picker = new Pikaday({
    field: this.$refs.input,
    format: 'YYYY-MM-DD'
  })

  this.$once('hook:beforeDestroy', function () {
    picker.destroy()
  })
}
```

Vue2常见问题

本篇文章零散记录vue2全家桶使用及原理， 暂不打算翻新，不推荐阅读




# Vue-Router基本原理
> 注： `vue-router 4`  对应的是 `vue3` 这里说的是`vue-router3`的实现

先来看一下使用
```js
Vue.use(VueRouter);
const routes = [
  {path: '/',name: 'home',component: Home},
  {path: '/about',name: 'about',component: About}
]

const router = new VueRouter({
  mode: 'hash',
  base: '/',
  routes
})
```
1. `Vue`的`use`方法会调用`plugin`的`install`方法传入自身（`Vue`）作为参数 这样就可以使用`mixins` 和注册全局组件(`router-view`、`router-link`)
2. `new Router`时，保存参数 到`this.$options`属性上
3. `mixins`混入组件`beforeCreate`周期，监测到根组件调用就把`router`挂在到原型上 `Vue.prototype.$router=this.$options.$router`
4. 监听`hashchange`或`popstate` 将路径保存到`this.current`
5. 响应式实现是利用`vue`特性，执行构造函数的时候，调用 `Vue.util.defineReactive(this, 'current', '/')`或 `new Vue({data: {current:'/'}})`

路由嵌套的实现
- `router-view` 深度标记
- 路由匹配时获取代表深度层级的`mached`数组

更多
- 混入其他周期勾子，路由守卫，子路由


# Vuex 基本原理
> 注： 这里指的是Vuex3的实现， Vuex4匹配的是Vue3

显示基本使用
```js
Vue.use(Vuex)

export default new Vuex.store({
    state: {},
    getters: {},
    actions: {},
    modules: {}
})
```

它的本质，挂载到跟节点，利用vue的响应式进行依赖收集和试图更新
```ts
// 保存构造函数引用，避免import
let Vue;

class Store {
  constructor(options) {
    // this.$options = options;
    this._mutations = options.mutations;
    this._actions = options.actions;

    // 响应化处理state
    // this.state = new Vue({
    //   data: options.state
    // })
    this._vm = new Vue({
      data: {
        // 加两个$，Vue不做代理
        $$state: options.state
      }
    })

    // 绑定commit、dispatch的上下文问store实例
    this.commit = this.commit.bind(this)
    this.dispatch = this.dispatch.bind(this)
  }

  // 存取器， store.state
  get state() {
    return this._vm._data.$$state
  }
  
  // store.commit('add', 1)
  // type: mutation的类型
  // payload：载荷，是参数
  commit(type, payload) {
    const entry = this._mutations[type]
    if (entry) {
      entry(this.state, payload)
    }
  }

  dispatch(type, payload) {
    const entry = this._actions[type]
    if (entry) {
      entry(this, payload)
    }
  }
}

function install(_Vue) {
  Vue = _Vue;

  Vue.mixin({
    beforeCreate() {
      if (this.$options.store) {
        Vue.prototype.$store = this.$options.store
      }
    }
  })
}

// Vuex
export default {
  Store,
  install
}
```

`getters`实现

![image.png](https://blog.warmplace.cn/static/img/2793d2f594800d932fa485368becf50b.image.webp)

# Vue指令API
1. 指令的组成公式 `v-directionName.modify:arg="expression"`
2. 五个钩子方法 `bind`、`inserted`、`update`、`componentsUpdated`、`unbind`
3. 可以简写相当于`bind`和`update`两个方法的合并
4. 钩子函数的四个参数`el`、`binding`、`vnode` 、 `oldVnode`
5. `binding`参数 `name`、 `modify`、 `arg`、 `expression`、`value`、`oldValue`

指令与组件的区别
1. 组件和指令都是vue实现逻辑复用的方式
2. 组件用于构建独立的模块
3. 指令用于处理普通元素涉及底层访问的DOM操作相关逻辑

# mint-ui的infintite-scroll执行实现
[infintite-scroll官方文档](http://mint-ui.github.io/docs/#/zh-cn2/infinite-scroll)

1. 使用Vue指令方式实现，参数有距离底部阀值、是否禁用、是否立即检查，通过标签属性传递。
2. 在`bind`时候进行对`dom`添加`scroll`监听，`unbind`的时候移除监听
3. 事件绑定有套检查机制，只有挂载到`dom`节点上才添加监听，监听方法做了节流
4. 立即检查为真时，会立即监听，如果`disable`变为`false`也会立即添加监听