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会被视为动态绑定,所以每次都回去追踪它的变化

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


事件追踪

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

你可能感兴趣的:(1.vue3.0优化)