vue render中on与nativeOn的区别与使用

在Vue的渲染函数(render函数)中，on 和 nativeOn 是用于处理事件的两个不同选项，它们有以下区别和使用：

1. on：

   • on 用于处理普通的Vue事件，如click、input等，这些事件是Vue自己封装的事件。
   • 事件处理函数可以是普通函数，也可以是在Vue组件中定义的方法。
   • on 中的事件处理函数会被Vue自动绑定到组件实例，因此可以访问组件的this上下文。

2. nativeOn：

   • nativeOn 用于处理原生DOM事件，如focus、blur、submit等，这些事件是DOM原生事件。
   • 事件处理函数必须是普通函数，不能是在Vue组件中定义的方法，因为这些事件处理函数与Vue组件无关。
   • nativeOn 中的事件处理函数不会自动绑定到组件实例，因此无法访问组件的this上下文。

使用示例：

import Vue from 'vue';

new Vue({
  render(h) {
    return h('div', [
      h('button', {
        on: {
          click: this.handleClick // 使用组件方法
        },
        nativeOn: {
          click: this.handleNativeClick // 使用普通函数
        }
      }, 'Click me')
    ]);
  },
  methods: {
    handleClick() {
      alert('Vue Click');
    },
    handleNativeClick() {
      alert('Native Click');
    }
  }
}).$mount('#app');

在上面的示例中，on 用于处理Vue事件（click），它可以调用组件内的方法(this.handleClick)。而 nativeOn 用于处理DOM原生事件（click），它只能调用普通函数(this.handleNativeClick)。这两种事件处理方式允许你分别处理Vue事件和原生DOM事件，以满足不同的需求。