Vue3核心新特性
vue3 带来的六大新特性
- Performance:性能比vue2.x块1.2~2倍
- Tree shaking support:支持按需编译,体积更小
- Composition API:组合API,类似React Hooks
- Custom Renderer API:暴露了自定义渲染API
- Fragment,Teleport(Protal),Suspense:新增三个组件
- Better TypeScript support:更好的支持TS
Performance
- 重写虚拟DOM的实现
- 运行时编译
- 静态提升与事件侦听器缓存
- SSR 速度提高
Tree-shaking support
Vue3.x中的核心API都支持tree-shaking,这些API都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。
Composition API
Vue2.x中,我们通常采用mixin来复用逻辑代码,使用起来虽然方便,但也存在一些问题:代码来源不清晰、方法属性可能出现冲突。因此,Vue3.x引入了Composition API(组合API),使用纯函数分割复用代码。和React Hooks的概念相似。官方Composition API
-
更好的逻辑复用和代码组织
-
更好的类型推导
Fragment、Teleport、Suspense
Fragment
在书写Vue2.x时,由于组件必须是一个根结点,很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的(这和React 中的Fragment组件是一样的)。
<fragment>
<div>非根节点</div>
<div>非根节点</div>
<div>非根节点</div>
</fragment>
Teleport
Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。
官方文档 teleport
<teleport to="#dialog">
<div>to的值使用与选择器获取dom节点一直</div>
<div>可以是id,class,属性选择器</div>
</teleport>
// index.html
<body>
<div id="app"></div>
<div id="dialog"></div>
</body>
Suspense
同样的,这和React中的Supense是一样的。
Suspense 让你的组件在渲染之前进行“等待”,并在等待时显示 fallback 的内容。
<template>
<Suspense>
<template #default>
<asyncComponent />
</template>
<template #fallback>
Loading ...
</template>
</Suspense>
</template>
Better TypeScript support
Vue3.x采用TypeScript重写,开发者使用Vue3.x时可以充分体验TS给编码带来的便利。
Custom Renderer API
这个API定义了虚拟DOM的渲染规则,这意味着使用自定义API可以达到跨平台的目的。
最后:Vue3.0 是如何变快的?
diff 算法优化
Vue2 中的虚拟dom 是进行全量对比;Vue3 新增静态标记
<span>{{value}}<span>
<span>value<span>
对动态绑定value的span会进行注释,官方叫它patch flag,在与上次虚拟节点进行对比时候,只对比带有patch flag的节点,并且可以通过flag的信息得知当前节点要对比的具体内容
hoistStatic 静态提升
Vue2 中无论元素是否参与更新,每次都会重新创建,然后在渲染
Vue3 中对于不参与更新的元素,会做静态提升,只被创建一次,在渲染时直接复用即可
cacheHandlers 事件侦听器缓存
默认情况下默认情况下onClick会被视为动态绑定,所以每次都会去追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可
ssr 渲染
当有大量静态的内容的时候,这些内容会被当作纯字符串推进一个buffer里面,即使存在动态的绑定,会通过模版插值嵌入进去,这样会比通过虚拟dom来渲染的快上很多很多
当静态内容大到一定量级的时候,会用_createStaticVNode方法在客户端去生成一个static node。这些静态node,会被直接innerHtml,就不需要创建对象,然后根据对象渲染。
上一篇: Vue3入门0:环境搭建
下一篇: 计算属性