Vue3.0

https://blog.csdn.net/weixin_40906515/article/details/105679019

Vue3.0六大亮点

1. 性能比Vue2.x快1.2~2倍；
2. 按需编译，体积比Vue2.x更小；
3. 组合API（类似React hook)；
4. 更好的Ts支持；
5. 暴露了自定义渲染API；
6. 更先进的组件；

一、Vue3.0是如何变快的？

要点1： diff方法优化

• Vue2中的虚拟DOM是进行全量对比
• Vue3新增了静态标记（PatchFlag），在创建虚拟DOM的时候，根据DOM中的内容会不会发生变化，添加静态标记。在和上次虚拟节点进行对比的时候，只对比带有patch flag的节点，并且可以通过flag的信息得知当前节点要对比的具体内容

vue3代码转换网址

附录:PatchFlags
export const enum PatchFlags{
TEXT = 1,//动态文本节点
CLASS=1<<1, //2//动态class
STYLE=1<<2, //4//动态style
PROPS=1<<3, //8//动态属性，但不包含类名和样式
FULLPROPS=1<<4,//16//具有动态key属性，当key改变时，需要进行完整的diff比较。
HYDRATE_EVENTS=1<<5,//32//带有监听事件的节点
STABLE FRAGMENT = 1 << 6, // 64 //一个不会改变子节点顺序的fragment
KEYED FRAGMENT = 1 << 7, // 128 //带有key 属性的fragment 或部分子字节有key
UNKEYED FRAGMENT = 1 << 8, // 256 //子节点没有key 的fragment
NEED PATCH = 1 << 9, // 512 //一个节点只会进行非props比较
DYNAMIC_ SLOTS = 1 << 10, // 1024 //动态slot
HOISTED = -1, //静态节点
//指示在diff过程应该要退出优化模式
BAIL= -2
}

要点2：静态提升hoisStatic

• Vue2中无论元素是否参与更新，每次都会重新创建，然后再渲染
• Vue3中对于不参与更新的元素，会做静态提升，只会被创建一次，渲染时直接复用即可
  

要点3：事件侦听缓存cacheHandlers

• 默认情况下onClick会被视为动态绑定，所以每次都会追踪他的变化
  但是是同一个函数，没有必要追踪变化，直接缓存起来服用即可

开启cacheHandlers之前

开启cacheHandlers之后

diff算法中，只有静态标记的才会进行比较，进行追踪
cache[1]，会自动生成并缓存一个内联函数，“神奇”的变为一个静态节点。
Ps：相当于React中useCallback自动化。

要点4：ssr

Vite
1、创建vue3三种方式

• Webpack
• Vue-cli
• Vite

2、什么是Vite
Vite一个 基于原生 ES-Module 的前端构建工具，利用 ES6 的 import 会发送请求去加载文件的特性，拦截这些请求，做一些预编译，省去 webpack 冗长的打包时间。

vue3兼容vue2

2、组合API

解决vue2数据、业务逻辑分散的问题