Vue 2 和 Vue 3 渲染函数中事件命名规范的区别☠️

最近在复盘 vue2 和 vue3 的一些基础知识,在本专栏做一下归纳总结。

在 Vue 2 和 Vue 3 中，使用渲染函数创建虚拟 DOM 的方式是有一些区别的，尤其是在处理事件命名上。以下是一些在 Vue 2 和 Vue 3 渲染函数中处理事件的主要区别：

Vue 2 渲染函数中的VNode事件处理：

// Vue 2 渲染函数
h('div', {
  on: {
    click: handleClick, // 事件名为 'click'
    mouseover: handleMouseOver, // 事件名为 'mouseover'
  },
});

Vue 3 渲染函数中的事件处理：

在 Vue 3 的渲染函数中，事件命名采用的是小驼峰式命名：

// Vue 3 渲染函数
h('div', {
  onClick: handleClick, // 事件名为 'click'
  onMouseover: handleMouseOver, // 事件名为 'mouseover'
});

在 Vue 3 中，事件名的命名规则更加符合 JavaScript 的标准，采用小驼峰式命名。这样的改变是为了更好地与原生 JavaScript 语法一致。

如果在迁移代码或者同时在 Vue 2 和 Vue 3 中使用渲染函数，记得注意事件的命名规范。

移除v-on.native修饰符.

父组件给子组件绑定的事件默认都是原生事件，如果子组件使用emits进行接收就说明该事件是自定义事件。 在 3.x 中，整个 VNode prop 的结构都是扁平的。 参考文档: v3-migration.vuejs.org/zh/breaking…