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


Posted in Javascript onMay 15, 2020

最近在重新看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事件绑定内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
Mootools 1.2教程 滑动效果(Slide)
Sep 15 Javascript
跟着JQuery API学Jquery 之三 筛选
Apr 09 Javascript
jquery getScript动态加载JS方法改进详解
Nov 15 Javascript
S2SH整合JQuery+Ajax实现登录验证功能实现代码
Jan 30 Javascript
js的toLowerCase方法用法实例
Jan 27 Javascript
JS中生成随机数的用法及相关函数
Jan 09 Javascript
学习使用AngularJS文件上传控件
Feb 16 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
你可能不知道的JSON.stringify()详解
Aug 17 Javascript
细述Javascript的加法运算符的具体使用
Oct 18 Javascript
vue 路由子组件created和mounted不起作用的解决方法
Nov 05 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
js实现简单贪吃蛇游戏
May 15 #Javascript
Javascript执行流程细节原理解析
May 14 #Javascript
使用npm命令提示: 'npm' 不是内部或外部命令,也不是可运行的程序的处理方法
May 14 #Javascript
javascript中的offsetWidth、clientWidth、innerWidth及相关属性方法
May 14 #Javascript
vue组件系列之TagsInput详解
May 14 #Javascript
ant-design-vue按需加载的坑的解决
May 14 #Javascript
JavaScript数组排序功能简单实现
May 14 #Javascript
You might like
php在数组中查找指定值的方法
2015/03/17 PHP
php使用curl详细解析及问题汇总
2016/08/11 PHP
phpstorm最新激活码分享亲测phpstorm2020.2.3版可用
2020/11/22 PHP
8个超棒的学习 jQuery 的网站 推荐收藏
2011/04/02 Javascript
js中自定义方法实现停留几秒sleep
2014/07/11 Javascript
jQuery实现复选框成对选择及对应取消的方法
2015/03/03 Javascript
jquery插件corner实现圆角边框的方法
2015/03/09 Javascript
JavaScript实现带标题的图片轮播特效
2015/05/20 Javascript
JavaScript中的Math.LN2属性用法详解
2015/06/12 Javascript
Jquery全选与反选点击执行一次的解决方案
2015/08/14 Javascript
JS+Canvas实现的俄罗斯方块游戏完整实例
2016/12/12 Javascript
浅谈jQuery中的$.extend方法来扩展JSON对象
2017/02/12 Javascript
bootstrap table表格插件使用详解
2017/05/08 Javascript
Node.js 多线程完全指南总结
2019/03/27 Javascript
javascrit中undefined和null的区别详解
2019/04/07 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[01:00:52]2018DOTA2亚洲邀请赛 4.4 淘汰赛 EG vs LGD 第一场
2018/04/05 DOTA
Python的Django框架使用入门指引
2015/04/15 Python
python with提前退出遇到的坑与解决方案
2018/01/05 Python
基于python的列表list和集合set操作
2019/11/24 Python
Python 之 Json序列化嵌套类方式
2020/02/27 Python
Python 如何测试文件是否存在
2020/07/31 Python
使用CSS3和Checkbox实现JQuery的一些效果
2015/08/03 HTML / CSS
html5 Canvas画图教程(6)—canvas里画曲线之arcTo方法
2013/01/09 HTML / CSS
南非最大的花卉和送礼服务:NetFlorist
2017/09/13 全球购物
美国马匹用品和马钉购物网站:State Line Tack
2018/08/05 全球购物
JavaScript实现页面动态验证码的实现示例
2021/03/23 Javascript
优秀通讯员事迹材料
2014/01/28 职场文书
驾驶员培训方案
2014/05/01 职场文书
应急处置方案
2014/06/16 职场文书
电焊工岗位工作职责
2014/07/09 职场文书
医院2014国庆节活动策划方案
2014/09/21 职场文书
第二次离婚起诉书
2015/05/18 职场文书
整脏治乱工作简报
2015/07/21 职场文书
公司团队口号霸气押韵
2015/12/24 职场文书
2016年母亲节广告语
2016/01/28 职场文书