Vue原理解析（十）：搞懂事件API原理及在组件库中的妙用
在vue内部初始化时会为每一个组件实例挂载一个this._events私有的空对象属性：vue
vm._events = Object.create(null) // 没有__proto__属性
复制代码
这个里面存放的就是当前实例上的自定义事件集合，也就是自定义事件中心，它存放着当前组件全部的自定义事件。和自定义事件相关的API分为如下四个：this.$on、this.$emit、this.$off、this.$once，它们会往这个事件中心中添加、触发、移除对应的自定义事件，从而组成了vue的自定义事件系统，接下来看下它们都是怎么实现的。面试
-
this.$on
描述：监听当前实例上的自定义事件。事件能够由
vm.$emit触发，回调函数会接收全部传入事件触发函数的额外参数。vuex
export default {
created() {
this.$on('test', res => {
console.log(res)
})
},
methods: {
handleClick() {
this.$emit('test', 'hello-vue~')
}
}
}
复制代码
以上示例首先在created钩子内往当前组件实例的事件中心_events中添加一个名为test的自定义事件，第二个参数为该自定义事件的回调函数，而触发handleClick这个方法后，就会在事件中心中尝试找到test自定义事件，触发它并传递给回调函数hello-vue~这个字符串，从而打印出来。咱们来看下$on的实现：数组
Vue.prototype.$on = function (event, fn) {
const hookRE = /^hook:/ //检测自定义事件名是不是hook:开头
const vm = this
if (Array.isArray(event)) { // 若是第一个参数是数组
for (let i = 0; i < event.length; i++) {
this.$on(event[i], fn) // 递归
}
} else {
(vm._events[event] || (vm._events[event] = [])).push(fn)
// 若是有对应事件名就push，没有建立为空数组而后push
if (hookRE.test(event)) { // 若是是hook:开头
vm._hasHookEvent = true // 标志位为true
}
}
return vm
}
复制代码
以上就是$on的实现了，它接受两个参数，自定义事件名event和对应的回调函数fn。主要就是往事件中心_events下挂载对应的event事件名key，而事件名对应的key又是一个数组形式，这样相同事件名的回调会在一个数组以内。而接下来的_hasHookEvent标志位表示是否监听组件的钩子函数，这个以后示例说明。bash
-
this.$emit
描述：触发当前实例上的事件，附加参数都会传给监听器回调。app
Vue.prototype.$emit = function (event) {
const vm = this
let cbs = vm._events[event] // 找到事件名对应的回调集合
if (cbs) {
const args = toArray(arguments, 1) // 将附加参数转为数组
for (let i = 0; i < cbs.length; i++) {
cbs[i].apply(vm, args) // 挨个执行对应的回调集合
}
}
return vm
}
复制代码
而$emit的实现会更好理解些，首先从事件中心中找到event对应的回调集合，而后将$emit其他参数转为args数组，最后挨个执行回调集合内的回调并传入args。经过这么一对朴实的API能够帮咱们理解三件小事：函数
1. 理解自定义事件原理
app.vue
<template>
<child-component @test='handleTest' />
</template>
export default {
methods: {
handleTest(res) {
console.log(res)
}
}
}
----------------------------------------
child.vue
<template>
<button @click='onClick'>btn</button>
</template>
export default {
methods: {
onClick() {
this.$emit('test', 'hello-vue~')
}
}
}
复制代码
以上是父子组件经过自定义事件通讯，想必你们很是熟悉。自定义事件的实现原理和一般解释的会不一样，它们的原理是父组件在通过编译模板后，会将定义在子组件上的自定义事件test及其回调handleTest经过$on添加到子组件的事件中心中，当子组件经过$emit触发test自定义事件时，会在它的事件中心中去找test，找到后传递hello-vue~给回调函数并执行，不过由于回调函数handleTest是在父组件做用域内定义的，因此看起来就像是父子组件之间通讯般。post
2. 监听组件的钩子函数
也就是$on内自定义事件名以前是hook:的状况，能够监听组件的钩子函数触发：ui
app.vue
<template>
<child-component @hook:created='handleHookEvent' />
</template>
复制代码
以上示例为当子组件的created钩子触发时，就触发父组件内定义的handleHookEvent回调。接下来让咱们再看一个官网的示例，使用这个特性如何帮咱们写出更优雅的代码：
监听组件钩子以前：
mounted () {
this.picker = new Pikaday({ // Pikaday是一个日期选择库
field: this.$refs.input,
format: 'YYYY-MM-DD'
})
},
beforeDestroy () { // 销毁日期选择器
this.picker.destroy()
}
监听组件钩子以后：
mounted() {
this.attachDatepicker('startDateInput')
this.attachDatepicker('endDateInput') // 同时为两个input添加日期选择
},
methods: {
attachDatepicker(refName) { // 封装为一个方法
const picker = new Pikaday({ // Pikaday是一个日期选择库
field: this.$refs[refName], // 为input添加日期选择
format: 'YYYY-MM-DD'
})
this.$once('hook:beforeDestroy', () => { // 监听beforeDestroy钩子
picker.destroy() // 销毁日期选择器
}) // $once和$on相似，只是只会触发一次
}
}
复制代码
首先不用在当前实例下挂载一个额外的属性，其次能够封装为一个方法，复用更方便。
3. 不借助
vuex跨组件通讯
再开发组件库时，由于都是独立的组件，从而引入vuex这种强依赖是不现实的，并且不少时候是用插槽来放置子组件，因此子组件的位置、嵌套、数量并不会肯定，从而在组件库内完成跨组件的通讯就尤其重要。
经过接下来的示例介绍组件库中会运用到的一种，使用$on和$emit来实现跨组件通讯，子组件经过父组件的name属性找到对应的实例，找到后使用$emit触发父组件的自定义事件，而在这以前父组件已经使用$on完成了自定义事件的添加：
export default {
methods: { // 混入mixin使用
dispatch(componentName, eventName, params) {
let parent = this.$parent || this.$root // 找父组件
let name = parent.$options.name // 父组件的name属性
while (parent && (!name || name !== componentName)) { // 和传入的componentName进行匹配
parent = parent.$parent // 一直向上查找
if (parent) {
name = parent.$options.name // 从新赋值name
}
}
if (parent) { // 找到匹配的组件实例
parent.$emit.apply(parent, [eventName].concat(params)) // $emit触发自定义事件
}
}
}
}
复制代码
接下来介绍表单验证组件内的使用案例：
iForm为整个表单，一个是
iFormItem为其中的某个表单项：
iForm组件：
<template>
<div> <slot /> </div> // 只有一个插槽
</template>
<script>
export default {
name: "iForm", // 组件名很重要
data() {
return {
fields: [] // 收集全部表单项的集合
};
},
created() {
this.$on("on-form-item-add", field => { // $on必须得比$emit先执行，由于要先添加嘛
this.fields.push(field) // 添加到集合内
});
},
methods: {
validataAll() { // 验证全部的接口方法
this.fields.forEach(item => {
item.validateVal() // 执行每一个表单项内的validateVal方法
});
}
}
};
</script>
复制代码
模板只有一个slot插槽，这个组件主要是作两件事，将全部的表单项的实例收集到fields内，提供一个能够验证全部表单项的方法validataAll，而后看下iFormItem组件：
<template>
<div>
<input v-model="curValue" style="border: 1px solid #aaa;" />
<span style="color: red;" v-show="showTip">输入不能为空</span>
</div>
</template>
<script>
import emitter from "./emitter" // 引入以前的dispatch方法
export default {
name: "iFormItem",
mixins: [emitter], // 混入
data() {
return {
curValue: "", // 表单项的值
showTip: false // 是否验证经过
};
},
created() {
this.dispatch("iForm", "on-form-item-add", this) // 将当前实例传给iForm组件
},
methods: {
validateVal() { // 某个表单项的验证方法
if (this.curValue === "") { // 不能为空
this.showTip = true // 验证不经过
}
}
}
};
</script>
复制代码
看到这里咱们知道了原来这种表单验证原理是将每一个表单项的实例传入给iForm，而后在iForm内遍历的执行每一个表单项的验证方法，从而能够一次性验证完全部的表单项。表单验证调用方式：
<template>
<div>
<i-form ref='form'> // 引用
<i-form-item />
<i-form-item />
<i-form-item />
<i-form-item />
<i-form-item />
</i-form>
<button @click="submit">提交</button>
</div>
</template>
<script>
import iForm from "./form"
import iFormItem from "./form-item"
export default {
methods: {
submit() {
this.$refs['form'].validataAll() // 验证全部
}
},
components: {
iForm, iFormItem
}
};
</script>
复制代码
这里就使用了$on和$emit这么一对API，经过组件的名称去查找组件实例，不论嵌套以及数量，而后使用事件API去跨组件传递参数。
注意点：当
$on和$emit配合使用时，$on要优先与$emit执行。由于首先要往实例的事件中心去添加事件，才能被触发。
-
this.$off
描述：移除自定义事件监听器，不过根据传入的参数分为三种形式：
- 若是没有提供参数，则移除全部的事件监听器；
- 若是只提供了事件，则移除该事件全部的监听器；
- 若是同时提供了事件与回调，则只移除这个回调的监听器。
export default {
created() {
this.$on('test1', this.test1)
this.$on('test2', this.test2)
},
mounted() {
this.$off() // 没有参数，清空事件中心
}
}
-------------------------------------------
export default {
created() {
this.$on('test1', this.test1)
this.$on('test2', this.test2)
},
mounted() {
this.$off('test1') // 在事件中心中移除test1
}
}
-------------------------------------------
export default {
created() {
this.$on('test1', this.test1)
this.$on('test1', this.test3)
this.$on('test2', this.test2)
},
mounted() {
this.$off('test1', this.test3) // 在事件中心中移除事件test1的test3回调
}
}
复制代码
知道了这个API的调用方式以后，接下来看下$off的实现方式：
Vue.prototype.$off = function (event, fn) {
const vm = this
if (!arguments.length) { // 若是没有传递参数
vm._events = Object.create(null) // 重置事件中心
return vm
}
if (Array.isArray(event)) { // event若是是数组
for (let i = 0, l = event.length; i < l; i++) {
vm.$off(event[i], fn) // 递归清空
}
return vm
}
if (!fn) { // 只传递了事件名没回调
vm._events[event] = null // 清空对应全部的回调
return vm
}
const cbs = vm._events[event] // 获取回调集合
let cb
let i = cbs.length
while (i--) {
cb = cbs[i] // 回调集合里的每一项
if (cb === fn || cb.fn === fn) { // cb.fn为$once时挂载的
cbs.splice(i, 1) // 找到对应的回调，从集合内移除
break
}
}
return vm
}
复制代码
也是分为了三种状况，根据参数的不一样作分别处理。
-
this.$once
描述：监听一个自定义事件，可是只触发一次，在第一次触发以后移除监听器。
效果和$on是相似的，只是说触发一次以后会从事件中心中移除。因此它的实现思路也很好理解，首先经过$on实现功能，当触发以后从事件中心中移除这个事件。来看下它的实现原理：
Vue.prototype.$once = function (event, fn) {
const vm = this
function on () {
vm.$off(event, on)
fn.apply(vm, arguments)
}
on.fn = fn // 回调挂载到on下，移除时好作判断
vm.$on(event, on) // 将on添加到事件中心中
return vm
}
复制代码
首先将回调fn挂载到on函数下，将on函数注册到事件中心去，触发自定义事件时首先会在$emit内执行on函数，在on函数内执行$off将on函数移除，而后执行传入的fn回调。这个时候事件中心没有了on函数，回调函数也执行了一次，完成$once功能~
事件
API总结：$on往事件中心添加事件；$emit是触发事件中内心的事件；$off是移除事件中内心的事件；$once是触发一次事件中内心的事件。哪怕是如此不显眼的API，再理解了它们的实现原理后，也能让咱们再更多场景更好的使用它们~
最后按照惯例咱们仍是以一道vue可能会被问到的面试题做为本章的结束(想不到事件相关特别好的题目~)。
面试官微笑而又不失礼貌的问道：
- 说下自定义事件的机制。
怼回去：
- 子组件使用
this.$emit触发事件时，会在当前实例的事件中心去查找对应的事件，而后执行它。不过这个事件回调是在父组件的做用域里定义的，因此$emit里的参数会传递给父组件的回调函数，从而完成父子组件通讯。
顺手点个赞或关注呗，找起来也方便~
参考：
- 1. Vue原理解析（十一）：搞懂extend和$mount原理并实现一个命令式Confirm弹窗组件
- 2. 一文搞懂AQS及其组件的核心原理
- 3. Vue原理「十」-- 组件化和MVVM ***
- 4. (原创)vue组件 - 组件的原理 和 注册组件
- 5. 如何理解Vue的给组件绑定原生事件(下)
- 6. 如何理解Vue的给组件绑定原生事件
- 7. javascript事件代理(delegate)原理解析
- 8. 通俗易懂理解Kubernetes核心组件及原理
- 9. Lifecycle组件的原理解析
- 10. vue 组件基本原理详解
- 更多相关文章...
- • MyBatis的工作原理 - MyBatis教程
- • TiDB数据库的存储原理（非常详细） - NoSQL教程
- • Java Agent入门实战（三）-JVM Attach原理与使用
- • ☆技术问答集锦（13）Java Instrument原理
-
每一个你不满意的现在，都有一个你没有努力的曾经。