https://blog.csdn.net/weixin_40906515/article/details/105679019
Vue3.0六大亮点
- 性能比Vue2.x快1.2~2倍;
- 按需编译,体积比Vue2.x更小;
- 组合API(类似React hook);
- 更好的Ts支持;
- 暴露了自定义渲染API;
- 更先进的组件;
一、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数据、业务逻辑分散的问题