VUE3的新特性

Vue是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

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

Vue3.0在性能方面比Vue2.x快了1.2～2倍。

• 重写虚拟DOM的实现

• 运行时编译

• 静态提升与事件侦听器缓存

• SSR 速度提高

Three-shaking support

Vue3.x中的核心API都支持tree-shaking，这些API都是通过包引入的方式而不是直接在实例化时就注入，只会对使用到的功能或特性进行打包（按需打包），这意味着更多的功能和更小的体积。

Composition API

Vue2.x中，我们通常采用mixin来复用逻辑代码，使用起来虽然方便，但也存在一些问题：代码来源不清晰、方法属性可能出现冲突。因此，Vue3.x引入了Composition API（组合API），使用纯函数分割复用代码。和React Hooks的概念相似。

• 更好的逻辑复用和代码组织

• 更好的类型推导

Fragment、Teleport、Suspense

新增三个组件。

Fragment

在书写Vue2.x时，由于组件必须是一个根结点，很多时候会添加一些没有意义的节点用于包裹。Fragment组件就是用于解决这个问题的（这和React 中的Fragment组件是一样的）。

Teleport

Teleport其实就是React中的Portal。Portal 提供了一种将子节点渲染到存在于父组件以外的 DOM 节点的优秀的方案。

一个 portal 的典型用例是当父组件有 overflow: hidden 或 z-index 样式时，但你需要子组件能够在视觉上“跳出”其容器。例如，对话框、悬浮卡以及提示框。

Suspense

同样的，这和React中的Supense是一样的。

Suspense 让你的组件在渲染之前进行“等待”，并在等待时显示 fallback 的内容。

Better TypeScript support

Vue3.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，就不需要创建对象，然后根据对象渲染。

  
  

千语创想移动端低代码开发平台(千语创想)是一款“云端一体”的低代码开发平台,可免费自助制作APP，也可进行专业APP定制开发。使用千语创想开发平台，是用Web语言去开发iOS和Android应用，这样将开发难度大幅降低，开发周期缩短将近一倍。此外，千语创想平台上有上千个各式各样的功能模块，一键调用方便去开发各类App。

立即免费在线制作一个APP，新手注册即送开发大礼包