上一章沒什麼經驗。直接寫了元件機制。感覺涉及到的東西非常的多，不是很方便講。今天看了下vue的關於事件的機制。有一些些體會。寫出來。大家一起糾正，分享。原始碼都是基於最新的Vue.js v2.3.0。下面我們來看看vue中的事件機制：
老樣子還是先上一段貫穿全域性的程式碼，常見的事件機制demo都會包含在這段程式碼中：
<div id="app">
<div id="test1" @click="click1">click1</div>
<div id="test2" @click.stop="click2">click2</div>
<my-component v-on:click.native="nativeclick" v-on:componenton="parentOn">
</my-component>
</div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
var Child = {
template: '<div>A custom component!</div>'
}
Vue.component('my-component', {
name: 'my-component',
template: '<div>A custom component!<div @click.stop="toParent">test click</div></div>',
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>上面的demo中一共有四個事件。基本涵蓋了vue中最經典的事件的四種情況
普通html元素上的事件
好吧。想想我們還是一個個來看。如果懂vue元件相關的機制會更容易懂。那麼首先我們看看最簡單的第一、二個(兩個事件只差了個修飾符)：<div id="test1" @click="click1">click1</div>
這是簡單到不能在簡單的一個點選事件。
我們來看看建立這麼一個簡單的點選事件，vue中發生了什麼。
1:new Vue()中呼叫了initState(vue):看程式碼
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);//呼叫了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)//通過返回函式修飾了事件的回撥函式。繫結了事件回撥函式的this。並且讓引數自定義。更加的靈活
: fn.call(ctx, a)
: fn.call(ctx)
}
// record original fn length
boundFn._length = fn.length;
return boundFn
}總的來說。vue初始化的時候，將method中的方法代理到vue[key]的同時修飾了事件的回撥函式。繫結了作用域。
2:vue進入compile環節需要將該div變成ast(抽象語法樹）。當編譯到該div時經過核心函式genHandler：
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//假如沒有修飾符。直接返回回撥函式
? 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];//處理修飾符陣列，例如.stop就在回撥函式里加入event.stopPropagation()再返回。實現修飾的目的
// 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 + "}")
}
}genHandler函式簡單明瞭，如果事件函式有修飾符。就處理完修飾符，新增修飾符對應的函式語句。再返回。這個過程還會單獨對native修飾符做特殊處理。這個等會說。compile完後自然就render。我們看看render函式中這塊區域長什麼樣子：
_c('div',{attrs:{"id":"test1"},on:{"click":click1}},[_v("click1")]),_v(" "),_c('div',{attrs:{"id":"test2"},on:{"click":function($event){$event.stopPropagation();click2($event)}}}一目瞭然。最後在虛擬dom－》真實dom的時候。會呼叫核心函式：
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
);
}元件上的事件
好了下面就是接下來的元件上的點選事件了。可以預感到他走的和普通的html元素應該是不同的道路。事實也是如此：
<my-component v-on:click.native="nativeclick" v-on:componenton="parentOn">
</my-component>最簡單的一個例子。兩個事件的區別就是一個有.native的修飾符。我們來看看官方.native的作用：在原生dom上繫結事件。好吧。很簡單。我們跟隨原始碼看看有何不同。這裡可以往回看看我少的可憐的上一章元件機制。vue中的元件都是擴充套件的vue的一個新例項。在compile結束的時候你還是可以發現他也是類似的一個樣子。如下圖：
_c('my-component',{on:{"componenton":parentOn},nativeOn:{"click":function($event){nativeclick($event)}}可以看到加了.native修飾符的會被放入nativeOn的陣列中。等待後續特殊處理。等不及了。我們直接來看看特殊處理。render函式在執行時。如果遇到元件。看過上一章的可以知道。會執行
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的函式。這裡就是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的函式。這裡就是componenton事件
// replace with listeners with .native modifier
data.on = data.nativeOn;//正常的data.on會被native修飾符的事件所替換
經過這兩句話。.native修飾符的事件會被放在data.on上面。接下來data.on上的事件（這裡就是nativeclick）會按普通的html事件往下走。最後執行target.add('',''')掛上原生的事件。而先前的data.on上的被快取在listeneners的事件就沒著麼愉快了。接下來他會在元件init的時候。它會進入一下分支：
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);
}
}
發現元件上的沒有.native的修飾符呼叫的是$on方法。這個好熟悉。進入到$on,$emit大致想到是一個典型的觀察者模式的事件。看看相關$on,$emit程式碼。我加點註解：
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);／／當emit的時候呼叫該事件。注意上面說的vue在初始化的守候。用bind修飾了事件函式。所以元件上掛載的事件都是在父作用域中的
}
}
return vm
};看了上面的$on,$emit用法下面這個demo也就瞬間秒解了（一個經常用的非父子元件通訊）：
var bus = new Vue()
// 觸發元件 A 中的事件
bus.$emit('id-selected', 1)
// 在元件 B 建立的鉤子中監聽事件
bus.$on('id-selected', function (id) {
// ...
})是不是豁然開朗。
又到了愉快的總結時間了。segementfault的編輯器真難用。內容多就卡。哎。煩。卡的時間夠看好多肥皂劇了。
總的來說。vue對於事件有兩個底層的處理邏輯。
1:普通html元素和在元件上掛了.native修飾符的事件。最終EventTarget.addEventListener() 掛載事件
2:元件上的，vue例項上的事件會呼叫原型上的$on,$emit（包括一些其他api $off,$once等等）
荊軻刺秦王。下次見