vue 3.x  相对于 vue  2.x 的重大修改

 

自定义指令

  • API 已重命名,以便更好地与组件生命周期保持一致
  • 自定义指令将由子组件通过 v-bind="$attrs"

 vue 3.x  相对于 vue  2.x 的重大修改

 

 

v-for 中的 Ref 数组

Vue 2 中,在 v-for 里使用的 ref attribute 会用 ref 数组填充相应的 $refs property。
Vue 3 中,这样的用法将不再在 $ref 中自动创建数组。要从单个绑定获取多个 ref,请将 ref 绑定到一个更灵活的函数上 (这是一个新特性)
 
vue 3.x  相对于 vue  2.x 的重大修改

 

 

 

Data 选项

2.x :data 选项是 object 或者是 function

3.x :data 选项已标准化为只接受返回 object 的 function

Mixin 合并行为变更

vue 3.x  相对于 vue  2.x 的重大修改

 

 

事件 API

2.x 语法

2.x 中,Vue 实例可用于触发通过事件触发 API 强制附加的处理程序 ($on$off 和 $once),这用于创建 event hub,以创建在整个应用程序中使用的全局事件侦听器

 vue 3.x  相对于 vue  2.x 的重大修改

3.x 更新

移除 $on$off 和 $once 方法,$emit 仍然是现有 API 的一部分,因为它用于触发由父组件以声明方式附加的事件处理程序

可以通过使用实现事件发射器接口的外部库来替换现有的 event hub mitt

 

过滤器(removed

Filters 已从 Vue 3.0 中删除,不再受支持(建议用方法调用或计算属性替换它们)

 

片段

2.x 中,不支持多根组件,当用户意外创建多根组件时会发出警告,因此,为了修复此错误,许多组件被包装在一个 <div> 中;

3.x 中,组件现在可以有多个根节点!但是,这确实要求开发者明确定义属性应该分布在哪里

vue 3.x  相对于 vue  2.x 的重大修改

 

功能组件

 在 Vue 2 中,功能组件有两个主要用例:
    • 作为性能优化,因为它们的初始化速度比有状态组件快得多
    • 返回多个根节点

vue 3.x  相对于 vue  2.x 的重大修改

 

全局 API

2.x 语法

Vue.nextTick() 是一个全局的 API 直接暴露在单个 Vue 对象上——事实上,实例方法 $nextTick() 只是一个方便的包装 Vue.nextTick() 为方便起见,回调的 this 上下文自动绑定到当前当前实例

3.x 语法

vue 3.x  相对于 vue  2.x 的重大修改

 

key attribute

vue 3.x  相对于 vue  2.x 的重大修改

vue 3.x  相对于 vue  2.x 的重大修改

 

 vue 3.x  相对于 vue  2.x 的重大修改

 

渲染函数 API

vue 3.x  相对于 vue  2.x 的重大修改

VNode Props 格式化

vue 3.x  相对于 vue  2.x 的重大修改

 

 

 

Slot 统一

  • this.$slots 现在将 slots 作为函数公开
  • BREAKING:移除 this.$scopedSlots

 

vue 3.x  相对于 vue  2.x 的重大修改

 

 

vue 3.x  相对于 vue  2.x 的重大修改

 

 

 

过渡的 class 名更改

 过渡类名 v-enter 修改为 v-enter-from、过渡类名 v-leave 修改为 v-leave-from

vue 3.x  相对于 vue  2.x 的重大修改

 

vue 3.x  相对于 vue  2.x 的重大修改

 

v-model

  • prop 和事件默认名称已更改

  vue 3.x  相对于 vue  2.x 的重大修改

  • sync 修饰符和组件的 model 选项已移除,可用 v-model 作为代替

  • NEW:现在可以在同一个组件上使用多个 v-model 进行双向绑定
  • NEW:现在可以自定义 v-model 修饰符

 

  vue 3.x  相对于 vue  2.x 的重大修改

 

 

 

vue 3.x  相对于 vue  2.x 的重大修改

 

v-if 与 v-for 的优先级对比

 vue 3.x  相对于 vue  2.x 的重大修改

 

v-bind 合并策略

vue 3.x  相对于 vue  2.x 的重大修改

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

相关文章:

  • 2021-04-26
  • 2021-08-26
  • 2022-12-23
  • 2022-12-23
  • 2021-08-01
  • 2022-12-23
  • 2021-10-15
  • 2022-12-23
猜你喜欢
  • 2021-06-13
  • 2022-12-23
  • 2021-11-16
  • 2022-12-23
  • 2021-05-31
  • 2022-12-23
  • 2022-12-23
相关资源
相似解决方案