vue源码解析之Event原理

源码分析

initEvents

组件实例初始化的时候会调用Vue.prototype._init，vm._init中调用了initEvents

initEvents这个函数做了以下几件事：

1. 给实例上添加一个 _events 对象，用于保存自定义事件
2. 获取到 父组件给 子组件绑定的自定义事件
3. 调用 updateComponentListeners 开始注册

updateComponentListeners

上面用到的注册事件$on和解绑$off

$emit

为什么给子组件绑定自定义事件，可以在子组件中像下面这样触发？

this.$emit('visibleChange',value);

<login :isLoginVisible="isLoginVisible" @visibleChange="isLoginVisibleChange"></login>

因为组件绑定的自定义事件和Vue的自定义事件都是使用同一种方法注册的，都存在于同样一个vm._events中

vue系列课程

最近会陆续的对vue进行源码分析，一系列课程如下：

state系列

1. props原理
2. methods原理
3. data原理
4. computed原理
5. watch原理

lifecycle系列

1. 生命周期原理

event系列

1. event原理

render系列

1. render原理

inject/provide系列

1. inject/provide原理

plugins系列

1. vue-router原理
2. Vue Router 那些事
3. Vuex你应该知道的事
4. vue源码解析之vuex原理
5. Vue自定义插件

组件系列

1. keep-alive原理
2. Vue 单文件组件
3. Vue组件间通信
4. vue虚拟列表

指令系列

1. Vue自定义指令
2. vue源码解析之Directives原理

算法系列

1. diff原理
2. Vue编译器源码分析

异步任务

1. vue源码解析之NextTick原理

其他

1. vue单元测试
2. Vue轮播组件
3. 你不知道的vue那些事
4. vue技巧大解密
5. 面试-高级前端之VUE数据响应式实现