最近 vue3 已经发布为默认 vue 版本，官网暂时还没有中文版，本文是对官网文档的一个阅读记录，主要对比了2和3 差异
vue3的新特性
- 使用 TS 开发
- 不兼容 IE11
- composition API
<script setup>语法糖- reactive 响应系统
- custom-renderer
- Fragments
- Teleport
怎么选 Options Api 和 Composition Api
- 不使用构建工具、在低复杂度场景中使用 Options Api
- 使用 vue 构建整个应用，使用 Composition Api + SFC
Options Api 和 Composition Api 特点
Options Api
- 基于类的模型，对于 OOP 背景的开发者更友好。
- 通过 watch、computed 抽象出响应系统的细节，对初学者更友好
Composition Api
- 需要了解响应系统的原理才能有效使用
- 直接在函数作用域内申明响应状态，更加灵活的组织和重用逻辑
- 更好的类型推断和提示
- 使用 tree sharking 能达到更小的打包体积
vue3 和 vue2 的区别
vue3 的很多改动都是为了消除 vue2 中 api 设计的不一致性。比如 v-model 和 .sync、scopedSlots、is 的用法等
- 全局 App Instance 改为 createApp。config、component、directive、mixin、use、globalProperties 这些资源可以通过 app 隔离。
- 组件 v-model 指令修改。原来的 value 和 input 改为 modelValue 和 update:modelValue。.sync 修饰符改为通过 v-model 实现。
- key 值必须唯一，用来给 diff 提供提示。
<template v-for>时，key 最好放在 template 元素上，而不是子元素上 - v-if 和 v-for 在同一个元素上时，v-if 的优先级较大
- v-bind 动态绑定属性和属性绑定一起使用时，最终的绑定结果跟语法顺序有关
- emits 选项定义组件时间，其他事件会被当做 native 事件绑定到组件根组件上
- 函数组件只能使用纯函数，functional 选项被废除。推荐使用状态组件替换函数组件，因为函数组件的性能优势已经没有了
- h 函数的获取由 render 函数参数改为全局导入。h 函数的 props 参数更加扁平化。h 的第一个参数不能直接传入组件名，需要使用 resolveComponent 函数将组件名解析为组件定义。
- scopedSlots 统一改为 $slots。在 h 函数的第三个参数传入
- listeners 统一改为 attrs 内包含 class 和 style 属性，不再强制特殊处理到根节点
- is 属性只能放在
<component>标签上使用，用来指定当前标签要创建的组件名。在其他标签上使用只会被当成普通元素属性传入构造函数。vue 2中特殊标签必须使用 is 来替换的，改为使用 vue: 前缀 - 移除 v-on 指令的 keyCodes 修饰符和 config.keyCodes
- 移除组件实例的 off和$once 方法，组件实例不再作为 event bus 使用 。
- 移除 filters，使用函数或 computed 替代
- 移除 $children
- app 挂载时，由之前替换挂载点改为作为挂载点子元素插入
