Vue事件相关的实例方法

最新推荐文章于 2024-08-10 07:36:11 发布

草莓味的狮子座leo

最新推荐文章于 2024-08-10 07:36:11 发布

阅读量146

点赞数

分类专栏： Vue.js 文章标签： vue

本文链接：https://blog.csdn.net/Mikon_0703/article/details/111580485

版权

Vue.js 专栏收录该内容

49 篇文章 1 订阅

订阅专栏

Vue.js提供了四个事件API，分别为$on，$once，$off，$emit

初始化事件

// 在vue实例上创建一个_events对象，存放事件
{
	eventName: [func1, func2, func3]
}

存放事件名以及对应执行方法。

/*初始化事件*/
export function initEvents (vm: Component) {
  /*在vm上创建一个_events对象，用来存放事件。*/
  vm._events = Object.create(null)
  
  /*这个bool标志位来表明是否存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/
  vm._hasHookEvent = false
  // init parent attached events
  /*初始化父组件attach的事件*/
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

一、$on

$on方法用来在vue实例上监听自定义事件，该事件由emit触发

Vue.prototype.$on = function(event: string | Array<string>, fn: Function): Component {
	const vm: Component = this
	
	/*如果是数组的时候，则递归$on，为每一个成员都绑定上方法*/
    if (Array.isArray(event)) {
      for (let i = 0, l = event.length; i < l; i++) {
        this.$on(event[i], fn)
      }
    }else{
    (vm._events[event] || (vm._events[event] = [])).push(fn)
    
     /*这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子，而不需要通过哈希表的方法来查找是否有钩子，这样做可以减少不必要的开销，优化性能。*/
      if (hookRE.test(event)) {
        vm._hasHookEvent = true
      }
    }
    return vm
  }