vue3.0新特性有:1、性能比vue2.x块1.2~2倍;2、支持tree-shaking;3、引入了Composition API;4、暴露了自定义渲染API;5、新增三个组件(Fragment、Teleport、Suspense)等。
本教程操作环境:windows7系统、vue3.0版,DELL G3电脑。
Vue3.0在性能方面比Vue2.x快了1.2~2倍。
重写虚拟DOM的实现
运行时编译
静态提升与事件侦听器缓存
SSR 速度提高
Vue3.x中的核心API都支持tree-shaking,这些API都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。
Vue2.x中,我们通常采用mixin来复用逻辑代码,使用起来虽然方便,但也存在一些问题:代码来源不清晰、方法属性可能出现冲突。因此,Vue3.x引入了Composition API(组合API),使用纯函数分割复用代码。和React Hooks的概念相似。
新增三个组件。
在书写Vue2.x时,由于组件必须是一个根结点,很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的(这和React 中的Fragment组件是一样的)。
Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。
同样的,这和React中的Supense是一样的。
Suspense 让你的组件在渲染之前进行“等待”,并在等待时显示 fallback 的内容。
Vue3.x采用TypeScript重写,开发者使用Vue3.x时可以充分体验TS给编码带来的便利。
这个API定义了虚拟DOM的渲染规则,这意味着使用自定义API可以达到跨平台的目的。
diff 算法优化
hoistStatic 静态提升
cacheHandlers 事件侦听器缓存
ssr 渲染
更多编程相关知识,请访问:编程视频!!
以上就是vue3.0有哪些新特性的详细内容,更多请关注php中文网其它相关文章!