关于vue3默认把所有onSomething当作v-on事件绑定的思考

最近在重新看vue3的rfcs，发现一个细节，原话如下：

props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below)

也就是说，以后如果你在传递props的时候，以 on 开头的props，如果在组件上没有做props的声明，那么会被当作事件绑定到组件的根节点上。

究其原因，我大致概括了两点：

  • 兼容vue2中的v-on.native
  • vue3的vnode声明把props拍平了，为了区分事件和其他props，就统一把所有的on开通的props默认作为事件绑定

为此，我开了一个issue来讨论这个问题，issue地址 。我关心的主要有两点：

  • 这是对functional component的严重限制
  • 是否会导致一些令人括困惑的误解

先讲第一点

vue3中可以直接通过 function() {} 来声明函数组件了，这是一个便利性的非常大的提升。在以前，你要声明组件，你必须要：

{
  functinal: true,
  props: {},
  render() {}
}

这最大的提升来自不需要声明props，为什么说这是提升，因为这让我们开发HOC变得更方便了。现在我们可以通过 ...rest 的方式把HOC不关心的props直接向下传递了。

但是现在因为这个默认限制，我们不得不在HOC中声明所有可能的他要扩展的组件以 on 开头的props。举个例子，我们有如下组件：

{
  props: {
    name: String,
    onChange: Function
  }
}

而我们的HOC的功能是在 name 前面加上 prefix ，对于这个HOC我们需要关心的只是 name 和他自己的props: prefix 。所以他的声明应该如下：

{
  props: {
    name: String,
    prefix: String
  }
}

然后在render中他可以这么做：

{
  render() {
    const {name, prefix, ...rest} = props
    return <WrapperedComponent name={`${prefix}-${name}`} {...rest} />
  }
}

也就是对于HOC来说，他是不需要关心他扩展的组件其他的props的，但是在这种情况下，如果我们不在HOC中声明，那么在使用的时候传入的 onChange 会自动绑定到root节点，而不是作为props传递下去。

第二点：令人困惑的使用

举个例子，如果我有一个组件：

{
  props: {
    onChange: Function
  },
  methods: {
    handleInput() {
      // do someting
      // 并且根据情况触发`onChange`
    }
  },
  render() {
    return <input onInput={this.handleInput} />
  }
}

很显然我是想要封装 input 的变化，在满足某些条件的时候才对外抛出新的value。但是如果这个时候有人就是不看文档，直接传递了 onInput ，那么这时候 input 事件会直接绑定到节点上，那么这也是可以触发的。

如果我们的测试用例太少或者不仔细，很可能反应不过来他们的区别。这显然是作为组件开发者的我们不希望出现的，但我们又无法限制这种行为。

总结

不得不说，我在考虑这两个问题的时候是有一定的 React思维 在里面的。因为个人来说我是比较喜欢React的API设计的，非常的简洁，其对于组件的使用也更趋于极致，就是一切皆组件（连 redirect 这样的行为都定义成了组件）。

而vue是一直在跟随react的，相信这点大家也不会否认。vue3更新的hooks（Composition）API，Suspense等明显是借鉴的React的概念。

但同时我又是很看好vue3的，我一直觉得vue2这样的API设计以及 .vue 文件的开发模式都是为了吸引中低级用户而准备的，甚至舍弃了一些高级API特性（比如HOC在vue中就很难实现，并且普及率相当低）。

而vue3的hooks API以及其对JSX的更好支持，还有更纯粹的 functional component ，让我一度看到了vue在工程方面更激进的变化。

但是 v-on 的默认行为，却又是一次那么明显的 替用户做决定 的行为。其实要解决这个问题很简单，可以完全不考虑 v-on ，把所有传递的参数作为props，如果组件开发者真的要在根节点上绑定事件，他可以实现的时候绑定，我们不应该在使用组件的场景下需要考虑在组件内部的节点上做一些事情，这样做的副作用实在太大了。

虽然目前看来尤老师会听取我的意见的可能性是非常小的，但我还是抱有一点简单的期望吧。

到此这篇关于关于vue3默认把所有onSomething当作v-on事件绑定的思考的文章就介绍到这了,更多相关vue3 onSomething当作v-on事件绑定内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

赞 (0)

相关推荐

  • 详解vue.js的事件处理器v-on:click

    详解vue.js的事件处理器v-on:click

    用 v-on 指令监听 DOM 事件 注意:HTML5中不能使用v-on,换为@ (1)html代码: <div id="example"> <button v-on:click="greet">Greet</button> // 或者 <button @click="greet">Greet</button> </div> (2)js代码: var vm = new Vue

  • VueJS事件处理器v-on的使用方法

    本文介绍了VueJS事件处理器v-on的使用方法,分享给大家,具体如下: 事件监听可以使用 v-on 指令. v-on:click表达式 HTML: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://cdn.bootc

  • vue学习笔记之动态组件和v-once指令简单示例

    本文实例讲述了vue动态组件和v-once指令.分享给大家供大家参考,具体如下: 点击按钮时,自动切换两个组件 <component :is="type"></component>,当点击按钮之后,会自动清除原来的组件,显示新的组件. 每一次切换,都需要销毁+创建 但是这样消耗有点大,所以我们在子组件中引用了v-once指令,这样可以将显示在页面中的组件存到内存中,不会完全销毁. <!DOCTYPE html> <html lang="

  • Vue 动态组件与 v-once 指令的实现

    本文介绍了Vue 动态组件与 v-once 指令的实现,分享给大家,具体如下: <div id="root"> <child-one></child-one> <child-two></child-two> <button>change</button> </div> Vue.component('child-one', { template: `<div>child-one&l

  • vue基础之事件v-onclick=

    vue基础之事件v-onclick="函数"用法示例

    本文实例讲述了vue基础之事件v-onclick=函数用法.分享给大家供大家参考,具体如下: v-on:click/mouseout/mouseover/dblclick/mousedown..... 事件: v-on:click="函数" v-on:click/mouseout/mouseover/dblclick/mousedown..... new Vue({ el:'#box', data:{ //数据 arr:['apple','banana','orange','pear'

  • VUE中v-on:click事件中获取当前dom元素的代码

    在开发中总是忘记,特意在此记录 关键字:   $event <div class="bed" v-on:click="updateBed(index,$event)">{{item.BedID}}<br>{{item.CriminalName}}</div> updateBed: function(index, e) { var selectedBedDom = $(e.srcElement)//dom元素 } PS:下面看下v-

  • vue.js学习笔记之v-bind和v-on解析

    v-bind 指令用于响应地更新 HTML 特性 形式如:v-bind:href    缩写为    :href; v-on 指令用于监听DOM事件 形式如:v-on:click  缩写为 @click; <body> <div id="test"> <img v-bind:src="src"> <a v-bind:href="url" rel="external nofollow"

  • 对vue中v-on绑定自定事件的实例讲解

    关于官网vue中v-on绑定自定义事件的个人理解 对官网实例进行了一些修改,如下图: <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>v-on绑定自定义事件</title> <script src="vue.js"></script> </head>

  • vue v-on监听事件详解

    在html或jsp页面中我们总能碰到监听DOM事件来触发javaScript代码,下面我们就简单聊聊Vue.js中的监听事件是怎么处理的. 在vue.js中监听事件是通过v-on指令来实现的,先看一下简单的监听事件代码. <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <scrip

  • 关于vue3默认把所有onSomething当作v-on事件绑定的思考

    最近在重新看vue3的rfcs,发现一个细节,原话如下: props that start with on are handled as v-on bindings, with everything after on being converted to all-lowercase as the event name (more on this below) 也就是说,以后如果你在传递props的时候,以 on 开头的props,如果在组件上没有做props的声明,那么会被当作事件绑定到组件的根

  • vue3自定义组件之v-model实现父子组件双向绑定

    vue3自定义组件之v-model实现父子组件双向绑定

    vue3 v-model父子组件双向绑定 vue3.x移除了vue2.x的model选项,自定义组件双向绑定不在使用以下方法: // vue2的v-model双向绑定方法 model: {      prop: 'value', //3.x默认值改为了modelValue      event: 'input' //3.x默认值改为了update:modelValue    }, //使用 this.$emit('input', index); vue3.x采用以下方式(v-model默认对应的

  • 如何在Vue3中实现自定义指令(超详细!)

    如何在Vue3中实现自定义指令(超详细!)

    目录 前言 生命周期 钩子的参数 简化形式 对象字面量 在组件上使用指令 几个实用的自定义指令 自动聚焦v-focus 防抖v-debounce 节流v-throttle 弹窗隐藏v-hide 总结 在开发Vue项目时,大多数人都会使用到Vue内置的一些指令,例如v-model.v-if等,在使用的时候不知道有没有想过自己也来实现一个指令呢.本文就以Vue3项目为基础,从原理.方法到实际案例.注意事项,尽可能细致的讲解如何自定义指令. 前言 我们需要明白为什么需要自定义一个指令,其实就是想更加简

  • 修改 CentOS 6.x 上默认Python的方法

    最近在工作中遇到一个问题,就是有一个功能希望在各种服务器上实现,而服务器上的系统版本可能都不一样,有的是 CentOS 6.x,有的是 CentOS 7.x . 需要说明的一点是,CentOS 6.x 上的 Python 版本是 2.6.x 的,而 CentOS 7.x 上的 Python 版本是 2.7.x 的,这意味着我要实现的功能要适配这两种版本的系统. 你可能会说,这有什么的,自己写的时候,注意一下就好了. 事情其实没有那么容易,我要实现的功能是基于一个框架进行定制,需要修改不少的框架代

  • 记录一个Vue3简易微信右滑删除逻辑的思路实现

    记录一个Vue3简易微信右滑删除逻辑的思路实现

    目录 一.搭建简易的页面 二.前置条件 三.设计touchstart函数 四.设计touchend函数 五.加上过度动画 今天项目需求需要实现一个类似于微信右滑显示额外选项的功能,记录一下实现思路. 一.搭建简易的页面 对应的代码,界面使用了tailwindCSS,代码非常简单,就是普通的定位,关键的定位已经用黄色框框圈出.right的值为div删除的宽度,其它的样式这里不再过多赘述. 二.前置条件 这里先来梳理一下思路. 首先,我们需要给这删除按钮组件打上ref,因为之后我们需要用到这个div

  • vue2.x中h函数(createElement)与vue3中的h函数详解

    目录 1. vue2.x的 h 函数(createElement) 2. vue3 h函数配置项 2.1 v-model实现(以下开始为官网实现) 2.2 v-on 2.3 事件修饰符 2.4 插槽 2.5 component 和 is 2.6 自定义指令 2.7 内置组件 2.8 渲染函数的返回值 2.9 JSX 总结 1. vue2.x的 h 函数(createElement) 使用方法及介绍:(参考官网提取) h函数第一个是标签名字 或者是组件名字,第二个参数是配置项,第三个参数是 inn

  • 一文秒懂Vue3的v-model

    目录 1:什么是 v-model 2:v-model 的扩展 1:自定义名称 2:内置修饰符 3:自定义修饰符 总结 1:什么是 v-model v-model 是 Vue 内置的指令作为属性接收一个变量(不能是常量)绑定到普通组件和自定义组件中 // 作为普通组件的属性, 只有作为表单内的元素属性时才会生效 如: input .radio .checkbox <template> <input v-model='value' /> </template> // 作为自

  • return false,对阻止事件默认动作的一些测试代码

    首先页面上有一个 <textarea id="test"></textarea> 我们为其绑定以下事件 复制代码 代码如下: test.onkeydown = function(){ return false; } test.onkeyup = function(){ return false; } test.onkeypress = function(){ return false; } 我们分别注释掉其中的两个事件,每次测试仅绑定一个事件. 很明显我们每个函

  • 浅谈js停止事件冒泡 阻止浏览器的默认行为(阻止超连接 #)

    在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 1..停止事件冒泡 JavaScript代码 //如果提供了事件对象,则这是一个非IE浏览器 if ( e && e.stopPropagation ) //因此它支持W3C的stopPropagation()方法 e.stopPropagation(); else //否则,我们需要使用IE的方式来取消事件冒泡 window.event.cancel

  • js事件冒泡、事件捕获和阻止默认事件详解

    js事件冒泡、事件捕获和阻止默认事件详解

    谈起JavaScript的 事件,事件冒泡.事件捕获.阻止默认事件这三个话题,无论是面试还是在平时的工作中,都很难避免. 1.事件冒泡 先来看一段代码: var $input = document.getElementsByTagName("input")[0]; var $div = document.getElementsByTagName("div")[0]; var $body = document.getElementsByTagName("bo

随机推荐