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

本文涉及的产品
公共DNS(含HTTPDNS解析),每月1000万次HTTP解析
云解析 DNS,旗舰版 1个月
全局流量管理 GTM,标准版 1个月
简介: 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 实例并触发事件。


目录
相关文章
|
20天前
|
JavaScript
vue 函数化组件
vue 函数化组件
|
1月前
|
资源调度 JavaScript API
vue3封装城市联动组件
vue3封装城市联动组件
196 63
|
11天前
|
JavaScript
vue组件中的插槽
本文介绍了Vue中组件的插槽使用,包括单个插槽和多个具名插槽的定义及在父组件中的使用方法,展示了如何通过插槽将父组件的内容插入到子组件的指定位置。
|
20天前
|
存储 API
vue3中如何动态自定义创建组件并挂载
vue3中如何动态自定义创建组件并挂载
214 90
|
1天前
|
JavaScript API
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
7 1
vue尚品汇商城项目-day04【24.点击搜索按钮跳转后的页面商品列表、平台售卖属性动态展示(开发Search组件)】
|
13天前
|
JavaScript
Vue使用element中table组件实现单选一行
如何在Vue中使用Element UI的table组件实现单选一行的功能。
37 5
Vue使用element中table组件实现单选一行
|
15天前
|
JavaScript
Vue2.0、Vue3.0分别使用v-model封装组件[Vue必会]
本文介绍了在Vue 2和Vue 3中如何使用`v-model`来实现组件间的双向数据绑定,包括在Vue 2中使用`value`和`input`事件,以及在Vue 3中使用`modelValue`和`update:modelValue`事件的方法。
62 22
|
1天前
|
JavaScript
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
vue尚品汇商城项目-day03【23.把首页当中的轮播图拆分为一个共用的全局组件】
8 2
|
1天前
|
JavaScript 索引
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
vue尚品汇商城项目-day04【27.分页器静态组件(难点)】
7 1
|
2天前
|
存储 JavaScript 前端开发
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
vue尚品汇商城项目-day05【30.登录与注册静态组件(处理公共图片资源问题)+31.注册的业务+登录业务】
10 1