vue@v3.0.6 之后 onCamelCase 事件语法无法触发事件

[b2nil]

相关平台

小程序、H5

复现仓库

https://github.com/b2nil/taro-ui-vue3
**小程序基础库: **
使用框架: Vue 3

复现步骤

• 使用 v3.1 版本的 @tarojs/cli 新建一个项目，选择 Vue3 框架
• 将 pages/index/index.vue 的代码替换为以下代码

<template>
  <view class="index">
    <view
      @touch-start="handleTouch('@touch-start')"
      @touch-move="handleTouch('@touch-move')"
    >使用 @touch-start 或 @touch-move： not working</view>
    <view
      @touchstart="handleTouch('onTouchstart')"
      @touchmove="handleTouch('@touchmove')"
    >使用 @touchstart 或 @touchmove: working</view>
    <text>{{ msg }}</text>
    <TestComp></TestComp>
  </view>
</template>

<script>
import { h, resolveComponent, ref } from 'vue'
import './index.css'

const TestComp = {
  name: "TestComp",
  setup() {
    function handleTouch(msg) {
      console.log(msg)
    }

    return () => {
      const View = resolveComponent(`${process.env.TARO_ENV === 'h5' ? 'taro-view' : 'view'}`)

      return h(View, null, {
        default: () => [
          h(View, {
            onTouchStart: handleTouch.bind(this, "onTouchStart"),
            onTouchMove: handleTouch.bind(this, "onTouchMove")
          }, { default: () => "使用 onTouchStart 或 onTouchMove: not working" }),
          h(View, {
            onTouchstart: handleTouch.bind(this, "onTouchstart"),
            onTouchmove: handleTouch.bind(this, "onTouchmove")
          }, { default: () => "使用 onTouchstart 或 onTouchmove: working" }),
        ]
      })
    }
  }
}

export default {
  components: {
    TestComp
  },
  setup() {
    const msg = ref('=================================')

    function handleTouch(msg) {
      console.log(msg)
    }

    return {
      msg,
      handleTouch
    }
  }
}
</script>

• 运行 yarn dev:h5 或 yarn dev:weapp
• 打开相应的开发工具点击查看具体情况

期望结果

使用 onTouchMove， onTouchStart, onScrollToUpper, onLineChange 等可以触发事件

实际结果

taro v3.1.1 事件使用 onCamelCase 语法 (on 后面为 2 个单词以上) 不能触发事件。必须改写为 onCamelcase 才能触发，例如onLinechange, onScrolltoupper 等等。

在 taro v3.0 种使用 onCamelCase 写法是可以事件的。

环境信息

$ taro info
� Taro v3.1.1
  Taro CLI 3.1.1 environment info:
    System:
      OS: Windows 10
    Binaries:
      Node: 12.18.1
      Yarn: 1.22.10
      npm: 7.5.2

---

补充信息

这个问题会导致使用 v3.0 写的组件库升级后，需要做很多改动。

[b2nil]

看起来这个问题好像是 vue@v3.0.6 有意为之，先关闭了。

[b2nil]

鉴于很多人从 vue@3.0.5 升级到 vue@3.0.6 或之后的版本后，都遇到了这个问题，还是将这个 Issue 再打开，供大家参考。

vue@3.0.6 中对 kebab-case 事件引入了下面这个变更，导致 taro 所有内置组件的事件绑定语法（vue 3.0）都会受到影响。
- kebab-case events are attached correctly on web components, see #2841 (b302cbb)