自从Vue—next2020年9月18日公布的vue3.0版本，倒退至今，当初支流的组件库根本都曾经公布了反对vue3.0的版本，其余的生态也在一直的欠缺中，这两年随着Vue3的一直倒退俨然曾经成为了国内最火的前端框架之一，那Vue3相比拟之前的其余版本的都有了什么新变动，添了什么新性能呢？这里做一个简略的总结，当然也有局部文档的传送门。

Vue3都有哪些显著的新性能

Vue3中值得关注的一些新性能包含：

第一，Composition API 组合式API，中文叫组合式API。

第二，SFC Composition API 语法糖 <script setup>。

第三，Teleport。

第四，Fragments。

第五，Emits Component Option。

第六，利用 @vue/runtime-core 的 createRenderer API 来创立自定义的渲染器。

第七，SFC 当初能够包含全局规定或只针对插槽内容的规定。

第八，Suspense，目前还是实验性的。

其中，第一、第二、第五、第六在 Vue2.7 中也取得了全副或局部反对。

Vue3有哪些新的框架级倡议呢？

Vue 3的反对库曾经进行了重大更新。比方：

  • 新版本的 Router、Devtools 和测试工具，反对Vue 3
  • 构建工具链: 由 Vue CLI 降级为 Vite
  • 状态治理: 由 Vuex 降级为 Pinia
  • IDE反对: 由 Vetur 降级为 Volar
  • 新的命令行TypeScript反对: vue-tsc
  • SSG: 由 VuePress 降级为 VitePress
  • JSX: 由@vue/babel-preset-jsx 降级为 @vue/babel-plugin-jsx

Vue3 全局API有哪些颠覆性的变动？

Vue3相较Vue2，有很多颠覆性的变动，降级的时候肯定要留神的，就全局API 而言，有：

  • 全局的Vue API被扭转为应用一个利用实例
  • 全局和外部API已被重组为树状构造

Vue3 模板指令有哪些颠覆性变动？

Vue3在模板指令上有很多颠覆性变动，降级时要注意，比方：

  • 组件上的 v-model用法已被从新设计，取代了 v-bind.sync
  • 扭转了在同一元素上应用 v-if 和 v-for 时的优先级有所扭转
  • v-bind="object" 当初是程序敏感的
  • v-on:event.native 修饰符已被移除

Vue3 组件有哪些颠覆性变动？

Vue3在组件上有很多颠覆性变动，降级时要注意，比方：

  • 函数式组件只能应用一般函数来创立
  • [单文件组件（SFC）
  • 异步组件当初须要 defineAsyncComponent 办法来创立
  • 组件事件当初应该用 emits 选项来申明

Vue3 渲染函数有哪些颠覆性变动？

Vue3在渲染函数上有很多颠覆性变动，降级时要注意，比方：

  • 渲染函数的API曾经产生扭转
  • 删除了$scopedSlots属性，所有 slot 都通过 $slots作为函数裸露进去
  • $listeners 已被移除，合并到了 $attrs中
  • $attrs当初蕴含 class 和 style 属性

Vue3 自定义元素有哪些颠覆性变动？

Vue3在自定义元素有很多颠覆性变动，降级时要注意，比方：

  • 自定义元素查看，当初在模板编译期间执行
  • is 属性仅仅用在组件上

Vue3 还有啥颠覆性的小变动？

Vue3还有很多颠覆性的小变动，降级时要注意，比方：

  • destroyed生命周期选项已被更名为unmounted
  • beforeDestroy 生命周期选项被改名为 beforeUnmount
  • default 工厂函数的 props 属性不再具备拜访 this 上下文的权限
  • 批改了自定义指令API，与组件生命周期保持一致，并删除了 binding.expression
  • data 应始终被申明为一个函数
  • 来自 mixins 的 data 选项当初被浅层的合并了
  • 属性的一些强制值策略扭转了
  • 一些 transition classes 改名了
  • 当初默认不显示包裹元素了
  • 当察看一个数组时, 回调将只在数组被替换时触发。如果你须要再渐变时触发，必须制订 deep选项
  • 没有非凡指令的<template> 标签，这些标签如 (v-if/else-if/else, v-for, or v-slot) ，当初被视为一般元素。这将导致原始的 <template> 元素被渲染进去。
  • app根元素在渲染时不会被替换掉了
  • 生命周期 hook:事件前缀被更换为 vnode-

当初对于Vue3 的新性能，大颠覆，小变动当初你都理解了么？