重大变更

此页面列出了 Vue 3 中与 Vue 2 相比的所有重大变更。

虽然看起来发生了很多变化，但您所熟悉和喜爱的 Vue 的许多方面仍然保持不变；但我们希望尽可能地做到全面，并为每个记录的变更提供详细的解释和示例。

详情

全局 API

• 全局 Vue API 已更改为使用应用程序实例
• 全局和内部 API 已重构为可树摇

模板指令

• v-model 在组件上的使用已重新设计，替换了 v-bind.sync
• key 在 <template v-for> 和非 v-for 节点上的使用已更改
• v-if 和 v-for 在同一元素上使用时的优先级已更改
• v-bind="object" 现在对顺序敏感
• v-on:event.native 修饰符已移除

组件

• 函数式组件只能使用普通函数创建
• 单文件组件 (SFC) <template> 上的 functional 属性和 functional 组件选项已弃用
• 异步组件现在需要使用 defineAsyncComponent 方法创建
• 组件事件现在应该使用 emits 选项声明

渲染函数

• 渲染函数 API 已更改
• $scopedSlots 属性已移除，所有插槽都通过 $slots 作为函数公开
• $listeners 已移除 / 合并到 $attrs
• $attrs 现在包含 class 和 style 属性

自定义元素

• 自定义元素检查现在在模板编译期间执行
• 特殊 is 属性的使用仅限于保留的 <component> 标签

其他细微变更

• destroyed 生命周期选项已重命名为 unmounted
• beforeDestroy 生命周期选项已重命名为 beforeUnmount
• Props default 工厂函数不再具有对 this 上下文的访问权限
• 自定义指令 API 已更改以与组件生命周期保持一致，并移除了 binding.expression
• data 选项应始终声明为函数
• 来自 mixin 的 data 选项现在浅层合并
• 属性强制策略已更改
• 一些过渡类已重命名
• <TransitionGroup> 现在默认情况下不渲染任何包装元素
• 当观察数组时，回调函数仅在数组被替换时触发。如果您需要在发生变异时触发，则必须指定 deep 选项。
• 没有特殊指令 (v-if/else-if/else、v-for 或 v-slot) 的 <template> 标签现在被视为普通元素，并将生成一个本地的 <template> 元素，而不是渲染其内部内容。
• 已挂载的应用程序不会替换其挂载到的元素
• 生命周期 hook: 事件前缀已更改为 vnode-

已移除的 API

• keyCode 作为 v-on 修饰符的支持
• $on、$off 和 $once 实例方法
• 过滤器
• 内联模板属性
• $children 实例属性
• propsData 选项
• $destroy 实例方法。用户不再需要手动管理各个 Vue 组件的生命周期。
• 全局函数 set 和 delete，以及实例方法 $set 和 $delete。它们不再需要使用基于代理的变更检测。