标签
note
字数
542 字
阅读时间
3 分钟
使用 composition API 代替 options API
使用声明周期需要引入。
作用：
- 一个功能块代码分散到各个 options 中，如 data 处理 reactive 数据，props 接受外部参数，methods 对应各种操作，模块功能多的时候就很难维护，而 composition API 就将函数和数据统一组合到 setup 中，解决了这些问题
- 因为 vue3 中需要用到的数据和方法都是通过 setup 来返回才能被使用的，而返回数据的地方相当集中，减少一定的数据使用问题
响应式原理
Vue3 使用 Proxy 的 observe，而 vue2 使用 Object.defineProperty
后者无法监听对象或者数组新增、删除的元素
- 使用数组的 push、pop 等方法或者 Vue.set 修改数组
提供了更多的组件：Fragment、Teleport（瞬移）和 Suspense（悬念）
- Fragment 主要是取代了 vue 标签模板中的根 div 节点，可以使用多个根节点，因为这些最终还是会被虚拟的 Fragment（切片）所包围
- Teleport 让组件的 html 在父组件界面外的特定标签 (很可能是 body) 下插入显示，还没遇到具体的使用场景
- Suspense 则是允许应用程序在等待异步组件时渲染一些后备内容，用来创建一个平滑的用户体验，应用场景就是加载大量异步数据时，使用 suspense 来做 loading 的显示过渡
更加支持 TypeScript
3.0 修改了组件的声明方式，改成了类式的写法，因为 TypeScript 因为其静态类型检查带来的好处，以至于构造大型的复杂项目越来越趋向使用 typescript，而 vue3 对比 vue2 则更好的支持了 ts 语法
更好的支持 Tree-shaking 支持
相比于 2.0 中整个 vue 对象的导入， 3.0 中的 API 都是按需导入
代码压缩能力：
变量名在被压缩时会被替换为简短的临时名字，而对象的属性则不会
贡献者
jiechen