vue3.0都有哪些新特性

Posted 2023-03-22

参考技术A

vue3.0新特性有：

1、性能比vue2.x快1.2 2倍- Performance ；

2、支持tree-shaking- Tree shaking support ；

3、引入了Composition API- Composition API ；

4、暴露了自定义渲染API- Custom Renderer API ；

5、新增三个组件（Fragment、Teleport、Suspense);

6、 更好的支持TS - Better TypeScript support；

一、Performance

二、 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 节点的优秀的方案。

五、API- Custom Renderer API

vue官方实现的 createApp 会给我们的 template 映射生成 html 代码，但是要是你不想渲染生成到 html ，而是要渲染生成到 canvas 之类的不是html的代码的时候，那就需要用到 Custom Renderer API 来定义自己的 render 渲染生成函数了。

html5都有哪些新特性

参考技术A HTML5对比传统HTML有很多的新特性，包括了
1、语义化标签：对比之前HTML没有体现结构语义化的标签，如：<div id="header"></div>，HTML5提供语义化标签，如：<header><article><footer><nav><aside><section>等
2、增强型表单：多个新的表单 Input 输入类型，如：color,url,date等这些新特性提供了更好的输入控制和验证。新增表单元素，如：<output>，用于用于不同类型的输出，比如计算或脚本输出。新增表单属性，如：placehoder 属性，简短的提示在用户输入值前会显示在输入域上。即我们常见的输入框默认提示，在用户输入后消失。
3、新增视频 <video> 和音频 <audio> 标签

4、Canvas绘图

5、SVG绘图
6、地理定位
7、拖放API
8、Web Worker
9、Web Storage
10、WebSocket