用Vue自己造个组件轮子，以及实践背后带来的思考

icyfire 发布于2019-08-22 13:45 / 2540人阅读

摘要：用造个组件轮子吧闰土大叔如果你掌握了的组件知识，相关的指令事件，花点时间你也可以造出这么个入门级的小轮子。接下来，抛出造轮子实践背后带来的一些思考。以上三部分内容构成了的整个执行过程。

前言

首先，向大家说声抱歉。由于之前的井底之蛙，误认为Vue.js还远没有覆盖到二三线城市的互联网小厂里。现在我错了，从我司的前端技术选型之路便可见端倪。以太原为例，已经有不少公司陆续开始采用Vue.js作为他们公司前端的技术栈，前后端分离正搞得热火朝天，还有更多的公司正在来时的路上。所以说，还在校的童鞋和仍在培训的萌新们，Vue已经成为现在前端的标配技能之一，为防止掉队，跟着闰土大叔学起来吧。

接下来，正文从这开始~

先来了解下当前的行业背景：

随着SPA、前后端分离的技术架构在业界越来越流行，前端的业务复杂度也越来越高，导致前端开发者需要管理的内容，承担的职责越来越多，这一切，使得业界对前端开发方案的思考多了很多，以react、vue等框架为代表推动的组件化开发模式越来越被开发者认可，这种模式极大的降低了我们开发与维护的成本。

最近一段时间，我也在研究Vue，在网上看了那么多基于Vue的组件，何不自己也来造个小轮子，有了这个想法后，撸子袖子就是干。本文提供代码仅仅是提供而已，重要的是思路。

  1 
  2 
  3 
  4     
  5     用Vue造个组件轮子吧-闰土大叔
  6 
  7 
  8     
  9         
 10     
 11 
 12 
111 
112 
113

如果你掌握了Vue的组件知识，相关的指令、事件，花点时间你也可以造出这么个入门级的小轮子。如果这篇文章只是单纯的贴出组件轮子代码那也太easy了。接下来，抛出造轮子实践背后带来的一些思考。

第一问：

vue 已经挂载的组件怎么初始化里面的data?

能问出这个问题的童鞋，说明你已经迷上了Vue。按照源码里讲的，vue将数据绑定到组件的原理分为三个步骤：当实例化一个Vue构造函数，会执行 Vue 的 init 方法，在 init 方法中主要执行三部分内容，一是初始化环境变量，二是处理 Vue 组件数据，三是解析挂载组件。以上三部分内容构成了 Vue 的整个执行过程。

第二问：

vue 注册组件为什么要必须发生在根实例初始化前？

可能你已经熟读Vue官方API文档，但是这个问题你考虑过么。如果在Vue根实例初始化之后才注册组件会发生什么？如果你有兴趣，我可以等你实践30秒再说我的想法。

30秒时间到了，在等你的时候，我又实践了一遍。是的，报错了。大意是，未知的自定义元素： - 你是否正确注册了组件？对于递归组件，请确保提供name选项。

我曾翻阅过官网API文档，也曾阅览过相关的书籍，但里面都是简单的提了一句：

这个问题无解么，不是的。其实你仔细想想报错信息，你应该会泯然一笑，说的通俗点，这就像坐高铁，买了票才能上。因为实例化的时候会尝试找这个组件，你不提前注册就找不到了。如果硬要深究，只能去看源码了。

第三问：

这个数字输入框组件网上很常见，在此基础上你有做什么扩展么？

是的，与网上的数字输入框组件不同的，我做了两个扩展。

第一个扩展：input框自动获取焦点，在输入框聚焦时，监听键盘上下按键的操作，相当于加1或者减1。

实现的思路，在input输入框上定义一个ref为input引用，然后在模板渲染完毕之后，在mounted钩子里，通过$refs查找到对应的ID：input，然后focus。获取完焦点之后，接下来就是如何监听键盘上下按键的操作。首先，我们通过keydown事件绑定一个show()方法，里面传一个$event参数，然后在子组件的methods选项内创建一个show方法。我们都知道，键盘上的上键对应的keyCode码是38，下键对应的是40。有了这个之后，我们做一个条件判断（上加下减），如果event的keyCode码为38，就调用handleUp()方法，如果是40，就调用handleDown()方法。至此，监听键盘上下键的按下进而操作input数值的扩展完成。

第二个扩展：给组件增加一个控制步伐的prop——step，比如设置为10，点击加号按钮，一次增加10。

继续说说我的思路，这个就相对来说比较简单了，首先在props选项内定义一个step对象，类型设置为Number，默认值设置为5。然后将methods里面的handleDown和handleUp里面将 this.currentValue +/-= （具体的数值）替换为 this.step。相当于进一步封装了它的可用性。至此，所有扩展完成。

后记

自己曾经求职面试前端，因不会Vue框架而被淘汰，而且不止一次，也曾因此赋闲半年在家。所以，事不过三，我要抓紧时间学会它，以及它的全家桶。有原则有危机感的人，往往都是之前吃过大亏的人。他们知道犯错误的代价，所以不敢触碰这个红线。愿我走过的路踩过的坑，你们不会再踩一遍，才会哭着鼻子记住这个教训。以铜为镜,可以正衣冠;以人为镜,可以明得失。在之后的日子里，我还会继续更新vue相关的文章，愿我们都做一个爱思考的孩子。前端路上，we are not alone。

想了解我的更多动态？欢迎关注我的公众号：闰土大叔，或者添加我的个人微信号：wxd91traveler，期待与你发生一段纯纯的友谊。

云服务器 GPU云服务器 vue20开发实践 vue组件 vue组件开发 vue父子组件通讯

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/92403.html

造个轮子,我学到了什么

摘要：阅读原文造个轮子我学到了什么听说的最多的是不是不要重复的造轮子不要被这句话蒙骗了，这句话应该还没说完整，在什么情况下不要造轮子实际项目中由于工期和质量原因，肯定不希望你造轮子，你造轮子花费时间且质量不如现有的轮子。阅读原文：造个轮子,我学到了什么听说的最多的是不是不要重复的造轮子？不要被这句话蒙骗了，这句话应该还没说完整，在什么情况下不要造轮子?实际项目中由于工期和质量原因，肯定不...

Acceml 2019-08-16 16:43 评论0 收藏0
我厌倦了 Redux，那就造个轮子 Rectx：第三集

摘要：呵呵，你没想到吧，这玩意儿竟然有第三集我靠，我自己都没想到，让我们悄悄的回顾一下前两集完全没想到，竟然会有第二集我厌倦了，那就造个轮子第二集痛点分析第一集在这里我厌倦了，那就造个轮子算了，我都懒得写了，自己看吧，当然不看也无所谓，正式开始。仓库：215566435/rectx 前言麻烦快去我的仓库里面喷：老子学不动了，求不要更新。呵呵，你没想到吧，这玩意儿竟然有第三集！我靠，我...

adam1q84 2019-08-02 16:31 评论0 收藏0
我厌倦了 Redux，那就造个轮子 Rectx：第三集

摘要：呵呵，你没想到吧，这玩意儿竟然有第三集我靠，我自己都没想到，让我们悄悄的回顾一下前两集完全没想到，竟然会有第二集我厌倦了，那就造个轮子第二集痛点分析第一集在这里我厌倦了，那就造个轮子算了，我都懒得写了，自己看吧，当然不看也无所谓，正式开始。仓库：215566435/rectx 前言麻烦快去我的仓库里面喷：老子学不动了，求不要更新。呵呵，你没想到吧，这玩意儿竟然有第三集！我靠，我...

eternalshallow 2019-08-23 11:29 评论0 收藏0
「造个轮子」——cicada 设计一个配置模块

摘要：同时也新增了一个。将不同的配置文件用不同的对象进行管理。由于需要支持多个配置文件，所有需要定义一个抽象类供所有的配置管理实现。其实就是一个结构的缓存，用于存放所有的配置。总结这就是本次中的升级内容，包含了配置支持以及代码重构。 showImg(https://segmentfault.com/img/remote/1460000016392132?w=2048&h=1365); 前言 ...

fsmStudy 2019-08-19 11:09 评论0 收藏0
造个轮子，基于 Laravel5.4 的下一代 PHP 开发框架（API/SPA/Vue2/iVi

摘要：像操作系统一样，你可以通过安装软件，成为适用于你的电脑。先进的技术方案，使得你无需担心后期功能拓展与迭代问题，大大降低了维护成本。对于一个超过三年生命周期的项目来说，最适合不过。总之，是新的技术方向标，能让每个艺术家像构建工程一样构建程序。这是我们团队的一个非盈利项目，以Apache2.0协议开源...不限制商用 Notadd是什么 Notadd 是基于Laravel 和 Vue 的...

Rocture 2019-06-27 16:29 评论0 收藏0