[TOC]

# VUE3 部分知识

# 1. vue3 简介

• 2020年9月18日，Vue.js发布版3.0版本，代号：One Piece（n
• 经历了：4800+次提交、40+个RFC、600+次PR、300+贡献者
• 官方发版地址：Release v3.0.0 One Piece · vuejs/core
• 截止2025年01月，最新的公开版本为：3.5.13

# 1.1 性能的提升

• 打包大小减少41%。

• 初次渲染快55%, 更新渲染快133%。

• 内存减少54%。

# 1.2 源码的升级

• 使用Proxy代替defineProperty实现响应式。

• 重写虚拟DOM的实现和Tree-Shaking。

# 1.3 拥抱TypeScript

• Vue3可以更好的支持TypeScript。

# 1.4 新的特性

1. Composition API（组合API）：

   • setup

   • ref与reactive

   • computed与watch

     ......

2. 新的内置组件：

   • Fragment支持：允许组件不需要根节点

     <template>
       <div>Part 1</div>
       <div>Part 2</div>
     </template>
     

   • Teleport组件：可以将组件内的HTML移动到DOM中其他位置

     <!-- 父组件 -->
     <template>
       <teleport to="body">
         <div v-if="isOpen" class="modal">
           <!-- 模态框内容 -->
         </div>
       </teleport>
     </template>
     

   • Suspense

   • Emits 选项: 使得组件更明确地声明它所触发的事件。

     import { defineComponent } from 'vue';
      
     export default defineComponent({
       emits: ['update', 'delete'],
       setup(props, { emit }) {
         function updateData() {
           emit('update');
         }
         // ...
       }
     });
     

     ......

3. 其他改变：

   • 新的生命周期钩子

   • data 选项应始终被声明为一个函数

   • 移除keyCode支持作为v-on 的修饰符

     ......