vue3新特性

1. ref传入函数, 使用同react
2. 异步引入需要使用助手函数defineAsyncComponent包裹, 选项用法时loader替代component

const asyncModal = defineAsyncComponent(() => import('./path/to/*.vue'));
// 或
const asyncModalWithOptions = defineAsyncComponent({
  loader: () => import('./path/to/*.vue'),
  delay: 200,
  timeout: 3000,
  errorComponent: ErrorComponent,
  loadingComponent: LoadingComponent
});

3. style和class挂载在$attrs下, 不再捆绑到组件根中
4. 移除$children
5. data只能是返回对象的函数
6. Mixin只执行浅合并
7. 要使用事件需要在emits中定义, 如: emits: ['change', 'update']
8. 移除$on、$off和$once
9. 移除过滤器语法
10. 支持片段(fragments)
11. 导入nextTick: import { nextTick } from 'vue';
12. v-if/v-else/v-else-if中可以不写key, template中存在v-for则key写在template中
13. 按键修饰符别名取键码值 🔗, 如: <input v-on:keyup.delete="confirmDelete" />
14. 移除$listeners
15. render不再接收渲染函数, 需要外部引入import { h } from 'vue';
16. 使用已经注册的组件时不再自己查找, 而是需要使用resolveComponent包装, 如: resolveComponent('my-component')
17. 移除$scopedSlots统一到$slots, 且插槽作为函数返回
18. <transition>过渡类名修改:
    • leave-class 已经被重命名为 leave-from-class (在渲染函数或 JSX 中可以写为：leaveFromClass)
    • enter-class 已经被重命名为 enter-from-class (在渲染函数或 JSX 中可以写为：enterFromClass)
19. 移除.native修饰, 如2.x中的: v-on:click.native, 在3.x中, 需要原生触发的事件我们只要在emits中不加入即可
20. 移除v-bind的.sync修饰符, 支持多个v-model, 变更如下:
    • 2.x语法: <ChildComponent :value="pageTitle" @input="pageTitle = $event" />
    • 3.x语法: <ChildComponent :title="pageTitle" @update:title="pageTitle = $event" />
21. v-if的优先级高于v-for
22. v-bind改为顺序合并
23. 子组件生命周期钩子@hook:updated改为@vnode-updated或vnodeUpdated