您好,欢迎来到三六零分类信息网!老站,搜索引擎当天收录,欢迎发信息

vue3.0有哪些新特性

2024/5/26 14:23:21发布22次查看
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 带来的六大新特性performance:性能比vue2.x块1.2~2倍tree shaking support:支持按需编译,体积更小composition api:组合api,类似react hookscustom renderer api:暴露了自定义渲染apifragment,teleport(protal),suspense:新增三个组件better typescript support:更好的支持tsperformancevue3.0在性能方面比vue2.x快了1.2~2倍。
重写虚拟dom的实现
运行时编译
静态提升与事件侦听器缓存
ssr 速度提高
three-shaking supportvue3.x中的核心api都支持tree-shaking,这些api都是通过包引入的方式而不是直接在实例化时就注入,只会对使用到的功能或特性进行打包(按需打包),这意味着更多的功能和更小的体积。
composition apivue2.x中,我们通常采用mixin来复用逻辑代码,使用起来虽然方便,但也存在一些问题:代码来源不清晰、方法属性可能出现冲突。因此,vue3.x引入了composition api(组合api),使用纯函数分割复用代码。和react hooks的概念相似。
更好的逻辑复用和代码组织更好的类型推导fragment、teleport、suspense新增三个组件。
fragment在书写vue2.x时,由于组件必须是一个根结点,很多时候会添加一些没有意义的节点用于包裹。fragment组件就是用于解决这个问题的(这和react 中的fragment组件是一样的)。
teleportteleport其实就是react中的portal。portal 提供了一种将子节点渲染到存在于父组件以外的 dom 节点的优秀的方案。
一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时,但你需要子组件能够在视觉上“跳出”其容器。例如,对话框、悬浮卡以及提示框。
suspense同样的,这和react中的supense是一样的。
suspense 让你的组件在渲染之前进行“等待”,并在等待时显示 fallback 的内容。
better typescript supportvue3.x采用typescript重写,开发者使用vue3.x时可以充分体验ts给编码带来的便利。
custom renderer api这个api定义了虚拟dom的渲染规则,这意味着使用自定义api可以达到跨平台的目的。
最后:vue3.0 是如何变快的?diff 算法优化
vue2 中的虚拟dom 是进行全量对比vue3 新增静态标记hoiststatic 静态提升
vue2 中无论元素是否参与更新,每次都会重新创建,然后在渲染vue3 中对于不参与更新的元素,会做静态提升,只被创建一次,在渲染时直接复用即可cachehandlers 事件侦听器缓存
默认情况下默认情况下onclick会被视为动态绑定,所以每次都会去追踪它的变化,但是因为是同一个函数,所以没有追踪变化,直接缓存起来复用即可ssr 渲染
当有大量静态的内容的时候,这些内容会被当作纯字符串推进一个buffer里面,即使存在动态的绑定,会通过模版插值嵌入进去,这样会比通过虚拟dom来渲染的快上很多很多当静态内容大到一定量级的时候,会用_createstaticvnode方法在客户端去生成一个static node。这些静态node,会被直接innerhtml,就不需要创建对象,然后根据对象渲染。更多编程相关知识,请访问:编程视频!!
以上就是vue3.0有哪些新特性的详细内容。
该用户其它信息

VIP推荐

免费发布信息,免费发布B2B信息网站平台 - 三六零分类信息网 沪ICP备09012988号-2
企业名录 Product