自从Vue—next2020年9月18日发布的vue3.0版本，发展至今，现在主流的组件库基本都已经发布了支持vue3.0的版本，其他的生态也在不断的完善中，这两年随着Vue3的不断发展俨然已经成为了国内最火的前端框架之一，那Vue3相比较之前的其他版本的都有了什么新变化，添了什么新功能呢?这里做一个简单的总结，当然也有部分文档的传送门。

　　Vue3都有哪些显著的新功能

　　Vue3中值得关注的一些新功能包括：

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

　　二，SFC Composition API 语法糖 。

　　三，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选项
• 　　没有特殊指令的 标签，这些标签如 (v-if/else-if/else, v-for, or v-slot) ，现在被视为普通元素。这将导致原始的 元素被渲染出来。
• 　　app根元素在渲染时不会被替换掉了
• 　　生命周期 hook:事件前缀被更换为 vnode-

　　现在关于Vue3 的新功能，大颠覆，小变化现在你都了解了么?

上一篇

详解 css 新特性 级联层@layer

下一篇

一篇文章带你了解Nodejs