Vue 2 阅读理解(十一)之 组件事件系统初始化

initEvents 组件事件初始化

initLifecycle 初始化生命周期执行结束后,紧接着就是执行 initEvents(vm) 来初始化实例的事件绑定。

这里的事件指的是在组件或者元素上通过 v-on 或者 @ 作为属性前缀的自定义元素属性,在 Vue 中会解析为自定义事件。

1. 查询和解析事件

在之前的 compile 模板解析部分,最终会调用 parseHTML() 方法来解析模板字符串并生成 AST 对象;并且在调用该函数之前定义了 closeElement(), start(), end() 几个方法,用来处理解析到不同数据时的处理方法。

其中,如果是自闭合标签,会在 start() 方法中直接调用 closeElement() 结束这个标签的解析,否则则在解析到结尾标签的时候通过 end() 方法来调用 closeElement() 结束处理。而在 closeElement 方法里面,就会通过 processElement 来处理 Vue 关键字属性和其他属性。这里事件定义部分也会当做普通属性,解析到 ast 对象的 attrsattrsList 中,但是一个新属性(events)用来标注事件。

大致格式如下:

{
  attrs: [],
  attrsList: [
    {
      "name": "v-on:click.stop",
      "value": "demoTwoClick",
      "start": 599,
      "end": 624
    },
    {
      "name": "@change-watch",
      "value": "demoTwoChange",
      "start": 625,
      "end": 654
    }
  ],
  attrsMap: {
    "ref": "demoTwo",
    "key": "demo2",
    "v-on:click.stop": "demoTwoClick",
    "@change-watch": "demoTwoChange"
  },
  events: {
    "click": {
      "value": "demoTwoClick",
      "dynamic": false,
      "modifiers": { stop: true },
      "start": 599,
      "end": 624
    },
    "change-watch": {
      "value": "demoTwoChange",
      "dynamic": false,
      "start": 625,
      "end": 654
    }
  }
}

attrs 数组会对绑定属性进行处理,剔除掉事件定义部分;attrsList 则包含完整的属性配置;attrsMap 包含属性的属性配置名和属性值的对应关系。

整个事件的解析过程大致为: processElement() => processAttrs() => addHandler() 。最终会生成一个字符串拼接到 render 函数的执行中,用来创建 VNode 与真实 DOM

在某个组件的模板内部的 html 原始元素上定义的事件,都 “不会” 被解析到组件的事件系统中。但是会在对应元素节点的 AST 对象上增加一个事件绑定,并将事件函数上下文指定为当前实例

2. initEvents 事件对象初始化

这部分都用来解析组件上的事件绑定,所以内部的函数命名都与 component 相关,源码位于 src/core/instance/events.ts

export function initEvents(vm: Component) {
  vm._events = Object.create(null)
  vm._hasHookEvent = false
  const listeners = vm.$options._parentListeners
  if (listeners) {
    updateComponentListeners(vm, listeners)
  }
}

export function updateComponentListeners(vm: Component, listeners: Object, oldListeners?: Object | null) {
  target = vm
  updateListeners(
    listeners,
    oldListeners || {},
    add,
    remove,
    createOnceHandler,
    vm
  )
  target = undefined
}

这里首先会在实例上创建一个空对象属性 _events ,用来保存组件事件;并创建一个生命周期监听事件的标识属性 _hasHookEvent

然后读取父组件的注册事件,如果存在事件,则调用 updateComponentListeners 将事件注册到子组件实例中。

updateComponentListeners 函数内部的定义也十分简单,就是 指定 this 指向 并调用 updateListeners 注册事件。

export function updateComponentListeners(vm: Component, listeners: Object, oldListeners?: Object | null) {
  target = vm
  updateListeners(
    listeners,
    oldListeners || {},
    add,
    remove,
    createOnceHandler,
    vm
  )
  target = undefined
}

3. updateListeners 事件注册

该函数位于 src/core/vdom/helpers/update-listeners.ts 内,主要是根据上面解析出来的事件定义来注册对应的事件,其函数定义如下:

export function updateListeners(
  on: Object,
  oldOn: Object,
  add: Function,
  remove: Function,
  createOnceHandler: Function,
  vm: Component
) {
  let name, cur, old, event
  for (name in on) {
    cur = on[name]
    old = oldOn[name]
    event = normalizeEvent(name)
    if (isUndef(cur)) {
      __DEV__ && warn('')
    } else if (isUndef(old)) {
      if (isUndef(cur.fns)) {
        cur = on[name] = createFnInvoker(cur, vm)
      }
      if (isTrue(event.once)) {
        cur = on[name] = createOnceHandler(event.name, cur, event.capture)
      }
      add(event.name, cur, event.capture, event.passive, event.params)
    } else if (cur !== old) {
      old.fns = cur
      on[name] = old
    }
  }
  for (name in oldOn) {
    if (isUndef(on[name])) {
      event = normalizeEvent(name)
      remove(event.name, oldOn[name], event.capture)
    }
  }
}

这里首先是遍历 新事件定义对象,并与之前的事件对象进行对象(如果当前事件中没有定义该事件函数,则报错)。

如果原事件 没有定义,则调用 createFnInvoker() 进行定义;但如果是一个 .once 修饰的事件,则会用 createOnceHandler() 重新定义该事件;最后将其添加到当前实例的 $on 属性中。

如果原事件中 有事件定义,但与新定义事件对象地址不同,则会将原事件定义的 函数定义部分 重新指向为当前新的事件定义,并赋值给新事件对象中即可。

最后,则是遍历原事件对象,将不存在与新事件对象中的事件去除(以事件名作为区分)

当然,在遍历之前还调用了 normalizeEvent 函数来格式化事件对象。

4. normalizeEvent 事件对象格式化

该函数定义十分简单,就是一个带缓存作用的字符串截断方法。

const normalizeEvent = cached(
  (name: string): {
    name: string
    once: boolean
    capture: boolean
    passive: boolean
    handler?: Function
    params?: Array<any>
  } => {
    const passive = name.charAt(0) === '&'
    name = passive ? name.slice(1) : name
    const once = name.charAt(0) === '~'
    name = once ? name.slice(1) : name
    const capture = name.charAt(0) === '!'
    name = capture ? name.slice(1) : name
    return { name, once, capture, passive }
  }
)

这里其实就是根据 @ 或者 v-on: 后的字符串,根据不同的定义来进行截断,返回一个包含 真实事件名、修饰符声明的对象。

5. createFnInvoker 创建事件调用

这个函数其实就是使用闭包方式返回一个调用函数 invoker,并添加 invoker.fns 属性,以 数组形式 保存这个事件名对应的所有事件。最后在调用 invoker() 时,内部会遍历 invoker.fns ,利用函数的 apply 方法改变指向为注册时的 Vue 实例并触发事件。

免责声明:
1.本站所有内容由本站原创、网络转载、消息撰写、网友投稿等几部分组成。
2.本站原创文字内容若未经特别声明,则遵循协议CC3.0共享协议,转载请务必注明原文链接。
3.本站部分来源于网络转载的文章信息是出于传递更多信息之目的,不意味着赞同其观点。
4.本站所有源码与软件均为原作者提供,仅供学习和研究使用。
5.如您对本网站的相关版权有任何异议,或者认为侵犯了您的合法权益,请及时通知我们处理。
火焰兔 » Vue 2 阅读理解(十一)之 组件事件系统初始化