认识Vue3

仅仅为了方便学习记录信息，未有其他用途。（采摘）

一、相关信息

1. Vue.js 3.0 "One Piece" 正式版在今年9月份发布。
2. 2年多开发, 100+位贡献者, 2600+次提交, 600+次PR
3. Vue3支持vue2的大多数特性
4. 更好的支持Typescript

---

二、性能提升

1. 打包大小减少41%
2. 初次渲染快55%, 更新渲染快133%
3. 内存减少54%
4. 使用Proxy代替defineProperty实现数据响应式
5. 重写虚拟DOM的实现和Tree-Shaking

---

三、新特性

Vue 组合式 API 代替了2.0的option API

setup函数

• ref 和 reactive
• computed 和 watch
• 新的生命周期函数
• provide与inject
• ......补充

新组件

1. Fragment - 文档碎片

• 在Vue2中: 组件必须有一个根标签包起来

<template>
  <div>
    <h2>aaaa</h2>
  </div>
</template>

• 在Vue3中: 组件可以没有根标签, 内部会将多个标签包含在一个Fragment虚拟元素中

<template>
   <h2>aaaa</h2>
</template>

2. Teleport - 瞬移组件的位置

<teleport to="body">
  <!--这个标签包裹的内容会渲染到to里面指定的dom位置-->
</teleport>

3. Suspense - 异步加载组件的loading界面

<Suspense>
  <template v-slot:default>
    <!--异步组件的内容异步获取,还没渲染出来时,会显示下面的loading-->
    <AsyncComp/>
  </template>
  <template v-slot:fallback>
    <h1>LOADING...</h1>
  </template>
</Suspense>
>

vue3生命周期解读<=============================>vue2=>vue3原理解析