vue底層事件邏輯解析

<p id="app">
 <p id="test1" @click="click1">click1</p>
 <p id="test2" @click.stop="click2">click2</p>
 <my-component v-on:click.native="nativeclick" v-on:componenton="parentOn">
 </my-component>
</p>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var Child = {
 template: '<p>A custom component!</p>'
} 
Vue.component('my-component', {
 name: 'my-component',
 template: '<p>A custom component!<p @click.stop="toParent">test click</p></p>',
 components: {
 Child:Child
 },
 created(){
 console.log(this);
 },
 methods: {
 toParent(){
 this.$emit('componenton','toParent')
 }
 },
 mounted(){
 console.log(this);
 }
})
 new Vue({
 el: '#app',
 data: function () {
 return {
 heihei:{name:3333},
 a:1
 }
 },
 components: {
 Child:Child
 },
 methods: {
 click1(){
 alert('click1')
 },
 click2(){
 alert('click2')
 },
 nativeclick(){
 alert('nativeclick')
 },
 parentOn(value){
 alert(value)
 }
 }
})
</script>

<p id="test1" @click="click1">click1</p>

function initState (vm) {
 vm._watchers = [];
 var opts = vm.$options;
 if (opts.props) { initProps(vm, opts.props); }
 if (opts.methods) { initMethods(vm, opts.methods); }//初始化事件
 if (opts.data) {
 initData(vm);
 } else {
 observe(vm._data = {}, true /* asRootData */);
 }
 if (opts.computed) { initComputed(vm, opts.computed); }
 if (opts.watch) { initWatch(vm, opts.watch); }
}
//接著看看initMethods
function initMethods (vm, methods) {
 var props = vm.$options.props;
 for (var key in methods) {
 vm[key] = methods[key] == null ? noop : bind(methods[key], vm);//調(diào)用了bind方法，我們再看看bind
 {
 if (methods[key] == null) {
 warn(
 "method \"" + key + "\" has an undefined value in the component definition. " +
 "Did you reference the function correctly?",
 vm
 );
 }
 if (props && hasOwn(props, key)) {
 warn(
 ("method \"" + key + "\" has already been defined as a prop."),
 vm
 );
 }
 }
 }
}
//我們接著看看bind
function bind (fn, ctx) {
 function boundFn (a) {
 var l = arguments.length;
 return l
 ? l > 1
 ? fn.apply(ctx, arguments)//通過返回函數(shù)修飾了事件的回調(diào)函數(shù)。綁定了事件回調(diào)函數(shù)的this。并且讓參數(shù)自定義。更加的靈活
 : fn.call(ctx, a)
 : fn.call(ctx)
 }
 // record original fn length
 boundFn._length = fn.length;
 return boundFn
}

function genHandler (
 name,
 handler
) {
 if (!handler) {
 return 'function(){}'
 }
 if (Array.isArray(handler)) {
 return ("[" + (handler.map(function (handler) { return genHandler(name, handler); }).join(',')) + "]")
 }
 var isMethodPath = simplePathRE.test(handler.value);
 var isFunctionExpression = fnExpRE.test(handler.value);
 if (!handler.modifiers) {
 return isMethodPath || isFunctionExpression//假如沒有修飾符。直接返回回調(diào)函數(shù)
 ? handler.value
 : ("function($event){" + (handler.value) + "}") // inline statement
 } else {
 var code = '';
 var genModifierCode = '';
 var keys = [];
 for (var key in handler.modifiers) {
 if (modifierCode[key]) {
 genModifierCode += modifierCode[key];//處理修飾符數(shù)組，例如.stop就在回調(diào)函數(shù)里加入event.stopPropagation()再返回。實現(xiàn)修飾的目的
 // left/right
 if (keyCodes[key]) {
 keys.push(key);
 }
 } else {
 keys.push(key);
 }
 }
 if (keys.length) {
 code += genKeyFilter(keys);
 }
 // Make sure modifiers like prevent and stop get executed after key filtering
 if (genModifierCode) {
 code += genModifierCode;
 }
 var handlerCode = isMethodPath
 ? handler.value + '($event)'
 : isFunctionExpression
 ? ("(" + (handler.value) + ")($event)")
 : handler.value;
 return ("function($event){" + code + handlerCode + "}")
 }
}

function add$1 (
 event,
 handler,
 once$$1,
 capture,
 passive
) {
 if (once$$1) {
 var oldHandler = handler;
 var _target = target$1; // save current target element in closure
 handler = function (ev) {
 var res = arguments.length === 1
 ? oldHandler(ev)
 : oldHandler.apply(null, arguments);
 if (res !== null) {
 remove$2(event, handler, capture, _target);
 }
 };
 }
 target$1.addEventListener(
 event,
 handler,
 supportsPassive
 ? { capture: capture, passive: passive }//此處綁定點擊事件
 : capture
 );
}

<my-component v-on:click.native="nativeclick" v-on:componenton="parentOn">
 </my-component>

function createComponent (
 Ctor,
 data,
 context,
 children,
 tag
) {
 if (isUndef(Ctor)) {
 return
 }
 var baseCtor = context.$options._base;
 // plain options object: turn it into a constructor
 if (isObject(Ctor)) {
 Ctor = baseCtor.extend(Ctor);
 }
 // if at this stage it's not a constructor or an async component factory,
 // reject.
 if (typeof Ctor !== 'function') {
 {
 warn(("Invalid Component definition: " + (String(Ctor))), context);
 }
 return
 }
 // async component
 if (isUndef(Ctor.cid)) {
 Ctor = resolveAsyncComponent(Ctor, baseCtor, context);
 if (Ctor === undefined) {
 // return nothing if this is indeed an async component
 // wait for the callback to trigger parent update.
 return
 }
 }
 // resolve constructor options in case global mixins are applied after
 // component constructor creation
 resolveConstructorOptions(Ctor);
 data = data || {};
 // transform component v-model data into props & events
 if (isDef(data.model)) {
 transformModel(Ctor.options, data);
 }
 // extract props
 var propsData = extractPropsFromVNodeData(data, Ctor, tag);
 // functional component
 if (isTrue(Ctor.options.functional)) {
 return createFunctionalComponent(Ctor, propsData, data, context, children)
 }
 // extract listeners, since these needs to be treated as
 // child component listeners instead of DOM listeners
 var listeners = data.on;//listeners緩存data.on的函數(shù)。這里就是componenton事件
 // replace with listeners with .native modifier
 data.on = data.nativeOn;//正常的data.on會被native修飾符的事件所替換
 if (isTrue(Ctor.options.abstract)) {
 // abstract components do not keep anything
 // other than props & listeners
 data = {};
 }
 // merge component management hooks onto the placeholder node
 mergeHooks(data);
 // return a placeholder vnode
 var name = Ctor.options.name || tag;
 var vnode = new VNode(
 ("vue-component-" + (Ctor.cid) + (name ? ("-" + name) : '')),
 data, undefined, undefined, undefined, context,
 { Ctor: Ctor, propsData: propsData, listeners: listeners, tag: tag, children: children }
 );
 return vnode
}

var listeners = data.on;//listeners緩存data.on的函數(shù)。這里就是componenton事件
// replace with listeners with .native modifier
data.on = data.nativeOn;//正常的data.on會被native修飾符的事件所替換

function initEvents (vm) {
 vm._events = Object.create(null);
 vm._hasHookEvent = false;
 // init parent attached events
 var listeners = vm.$options._parentListeners;
 if (listeners) {
 updateComponentListeners(vm, listeners);
 }
}
function updateComponentListeners (
 vm,
 listeners,
 oldListeners
) {
 target = vm;
 updateListeners(listeners, oldListeners || {}, add, remove$1, vm);
}
function add (event, fn, once$$1) {
 if (once$$1) {
 target.$once(event, fn);
 } else {
 target.$on(event, fn);
 }
}

Vue.prototype.$on = function (event, fn) {
 var this$1 = this;
 var vm = this;
 if (Array.isArray(event)) {
 for (var i = 0, l = event.length; i < l; i++) {
 this$1.$on(event[i], fn);
 }
 } else {
 (vm._events[event] || (vm._events[event] = [])).push(fn);//存入事件
 // optimize hook:event cost by using a boolean flag marked at registration
 // instead of a hash lookup
 if (hookRE.test(event)) {
 vm._hasHookEvent = true;
 }
 }
 return vm
 };
Vue.prototype.$emit = function (event) {
 var vm = this;
 console.log(vm);
 {
 var lowerCaseEvent = event.toLowerCase();
 if (lowerCaseEvent !== event && vm._events[lowerCaseEvent]) {
 tip(
 "Event \"" + lowerCaseEvent + "\" is emitted in component " +
 (formatComponentName(vm)) + " but the handler is registered for \"" + event + "\". " +
 "Note that HTML attributes are case-insensitive and you cannot use " +
 "v-on to listen to camelCase events when using in-DOM templates. " +
 "You should probably use \"" + (hyphenate(event)) + "\" instead of \"" + event + "\"."
 );
 }
 }
 var cbs = vm._events[event];
 console.log(cbs);
 if (cbs) {
 cbs = cbs.length > 1 ? toArray(cbs) : cbs;
 var args = toArray(arguments, 1);
 for (var i = 0, l = cbs.length; i < l; i++) {
 cbs[i].apply(vm, args);／／當(dāng)emit的時候調(diào)用該事件。注意上面說的vue在初始化的守候。用bind修飾了事件函數(shù)。所以組件上掛載的事件都是在父作用域中的
 }
 }
 return vm
 };

var bus = new Vue()
// 觸發(fā)組件 A 中的事件
bus.$emit('id-selected', 1)
// 在組件 B 創(chuàng)建的鉤子中監(jiān)聽事件
bus.$on('id-selected', function (id) {
 // ...
})