1.vue3.0优化

vue3.0

1.vue3.0六大特点

- Perfprmace:性能比Vue 2.x 快1.2~2倍

- Tree shaking support:按需编译，体积比vue2.x更小

- Composition API:组合API(类似React Hooks)

- Better TypeScript support: 更好的Ts支持

- Custom Renderer API : 暴露了自定义渲染API

- Fragment,Teleport(Protal),Supense:更先进的组件

---

2.Vue 3.0是如何变快的？

- diff方法优化

    + vue2中虚拟dom是进行全量的对比

    + vue3新增了静态标记

      在与上次虚拟节点进行对比的时候，值对比带有Patch flag的节点

      并且可以通过flag的信息得知当前节点要对比的具体内容

diff优化

---

- hoistStatic 静态提升

    + vue2中无论元素是否参与更新，每次都会重新创建

    + vue3中对比不参与更新的元素，只会被创建一次，之后会再每次渲染的时候不停地重复

vue2.0 

vue3.0

这里把静态的元素都提取到了外部，在内部直接调用 节省了多次创建的性能。

---

- cacheHandlers 事件监听缓存器

    + 默认情况下onClick会被视为动态绑定，所以每次都回去追踪它的变化

      但是因为是统一函数，所以没有追踪变化，直接缓存起来复用即可

事件追踪

减少没有必要的比较，从而优化性能。