Web前端最全学习vue源码（1） 手写与事件相关的实例方法(1)，今日头条前端面试题

结尾

学习html5、css、javascript这些基础知识，学习的渠道很多，就不多说了，例如，一些其他的优秀博客。但是本人觉得看书也很必要，可以节省很多时间，常见的javascript的书，例如：javascript的高级程序设计，是每位前端工程师必不可少的一本书，边看边用，了解js的一些基本知识，基本上很全面了，如果有时间可以读一些，js性能相关的书籍，以及设计者模式，在实践中都会用的到。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

这5个函数的作用就是向Vue的原型上挂载方法。

当函数initMixin被调用时，会向Vue构造函数的prototype属性添加_init方法，执行new Vue()时，会调用_init方法。

好，接下来进入到本文的标题，与事件相关的实例方法有4个，分别是，vm. o n , v m . on , vm. on,vm.emit,vm. o n c e , v m . once,vm. once,vm.off;

这四个方法实在eventsMixin中挂在到Vue构造函数和prototype属性中的。

当eventsMixin被调用的时候，会向Vue构造函数的prototype属性添加4个实例方法。

下面将介绍一下这四种方法

用法：监听当前实例上的自定义事件，事件可以由vm.$emit触发，回调函数会接收所有传入事件所触发的函数的额外参数

原理：只需要在注册事件时将回调函数收集起来，在触发事件时将收集起来的回调函数依次调用即可，代码如下

Vue.prototype.$on = function (event, fn) {

var vm = this;

if (Array.isArray(event)) {

for (var i = 0, l = event.length; i < l; i++) {

vm.$on(event[i], fn);

}

} else {

(vm._events[event] || (vm._events[event] = [])).push(fn);

}

return vm

};

当event为数组的时候，需要遍历数组，使得数组中的每一项都调用vm.$on,使回调可以注册到数组中每项事件名所指定的事件列表中，当event参数不为数组时，就像事件列表中添加回调。

vm._events是一个对象，用来存储事件，使用事件名（event）从vm._events中取出事件列表，如果列表不存在，则使用空数组初始化，然后将回调函数添加到事件列表中。

vm._events在执行new Vue（）时，会执行this._init方法进行一系列操作，其中就在vue.js的实例上创建一个_events

用法：触发当前实例上的事件，附加参数都会传给监听器回调。

原理：vm.$emit作用是触发事件，所有的事件监听器回调都会存储在vm._events中，所以触发事件的实现思路是使用事件名从vm._events中取出对应的事件监听器回调

列表，然后依次执行列表中的监听器回调并将参数传递给监听器回调，代码如下

Vue.prototype.$emit = function (event) {

var vm = this;

var cbs = vm._events[event];

if (cbs) {

// const args = toArray(arguments,1);

cbs = cbs.length > 1 ? toArray(cbs) : cbs;

var args = toArray(arguments, 1);

var info = “event handler for “” + event + “””;

for (var i = 0, l = cbs.length; i < l; i++) {

try{

cbs[i].apply(vm,args)

}catch(e){

handleError(e,vm,event handler for "${event}")

}

}

}

return vm

};

使用event从vm._events中取出事件监听器回调函数列表，并将其赋值给变量cbs，如果cbs存在，依次调用每一个监听器回调并将其所有参数传给监听器回调。

toArray的作用是将类似于数组的数据换成真正的数组，它的第二个参数是起始位置，也就是说，args是一个数组，里面包含除第一个参数之外的所有参数。

o n 和 on和 on和emit可以结合起来使用，大部分用于父子组件传值,但是这里有一个问题

1、究竟是由子组件内部主动传数据给父组件，由父组件监听接收（由子组件中操作决定什么时候传值）

2、还是通过父组件决定子组件什么时候传值给父组件，然后再监听接收 （由父组件中操作决定什么时候传值）

两种情况都有

m e i t 事 件 触 发 , 通 过 子 组 件 内 部 的 事 件 触 发 自 定 义 事 件 meit事件触发,通过子组件内部的事件触发自定义事件 meit事件触发,通过子组件内部的事件触发自定义事件emit

m e i t 事 件 触 发 ， 可 以 通 过 父 组 件 操 作 子 组 件 ( r e f ) 的 事 件 来 触 发 自 定 义 事 件 meit事件触发， 可以通过父组件操作子组件 (ref)的事件来触发 自定义事件 meit事件触发，可以通过父组件操作子组件(ref)的事件来触发自定义事件emit

第一种情况

父组件 所以msg打印出来就是蜡笔小柯南

子组件

第二种情况

父组件 通过ref操作子组件触发事件

子组件

将两者情况对比，区别就在于$emit 自定义事件的触发是有父组件还是子组件去触发

第一种，是在子组件中定义一个click点击事件来触发自定义事件$emit,然后在父组件监听

第二种，是在父组件中第一一个click点击事件，在组件中通过refs获取实例方法来直接触发事件,然后在父组件中监听

用法：

移除自定义事件监听器。

如果没有提供参数，则移除所有的事件监听器；

如果只提供了事件，则移除该事件所有的监听器；

如果同时提供了事件与回调，则只移除这个回调的监听器。

Vue.prototype.$off = function(event,fn){

const vm = this;

//1-1、没有提供参数的情况，此时需要移除所有事件的监听器

最后

小编的一位同事在校期间连续三年参加ACM-ICPC竞赛。从参赛开始，原计划每天刷一道算法题，实际上每天有时候不止一题，一年最终完成了 600+：

凭借三年刷题经验，他在校招中很快拿到了各大公司的offer。

入职前，他把他的刷题经验总结成1121页PDF书籍，作为礼物赠送给他的学弟学妹，希望同学们都能在最短时间内掌握校招常见的算法及解题思路。

整本书，我仔细看了一遍，作者非常细心地将常见核心算法题和汇总题拆分为4个章节。

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。

77268ce7d1f69b2002194d.png)

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

而对于有时间的同学，作者还给出了他结合众多数据结构算法书籍，挑选出的一千多道题的解题思路和方法，以供有需要的同学慢慢研究。