关于前端:一文了解Vue3新变化

自从 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 的新性能，大颠覆，小变动当初你都理解了么？