认识Vue3
2021-01-09 本文已影响0人
小米和豆豆
仅仅为了方便学习记录信息，未有其他用途。（采摘）
一、相关信息
- Vue.js 3.0 "One Piece" 正式版在今年9月份发布。
- 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
- Vue3支持vue2的大多数特性
- 更好的支持Typescript
二、性能提升
- 打包大小减少41%
- 初次渲染快55%, 更新渲染快133%
- 内存减少54%
- 使用Proxy代替defineProperty实现数据响应式
- 重写虚拟DOM的实现和Tree-Shaking
三、新特性
Vue 组合式 API 代替了2.0的option API
setup函数
- ref 和 reactive
- computed 和 watch
- 新的生命周期函数
- provide与inject
- ......补充
新组件
- Fragment - 文档碎片
- 在Vue2中: 组件必须有一个根标签包起来
<template>
<div>
<h2>aaaa</h2>
</div>
</template>
- 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中
<template>
<h2>aaaa</h2>
</template>
- Teleport - 瞬移组件的位置
<teleport to="body">
<!--这个标签包裹的内容会渲染到to里面指定的dom位置-->
</teleport>
- Suspense - 异步加载组件的loading界面
<Suspense>
<template v-slot:default>
<!--异步组件的内容异步获取,还没渲染出来时,会显示下面的loading-->
<AsyncComp/>
</template>
<template v-slot:fallback>
<h1>LOADING...</h1>
</template>
</Suspense>
>
vue3生命周期解读<=============================>vue2=>vue3原理解析
