Rumah hujung hadapan web tutorial js Vue.js事件机制源码解析

Vue.js事件机制源码解析

Jan 30, 2018 pm 05:38 PM
javascript vue.js menghuraikan

因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。本文主要介绍了Vue.js源码之事件机制,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧,希望能帮助到大家。

在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助。
可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。

Vue事件API

众所周知,Vue.js为我们提供了四个事件API,分别是$on](https://cn.vuejs.org/v2/api/#vm-on-event-callback),[$once,$off](https://cn.vuejs.org/v2/api/#vm-off-event-callback),[$emit。

初始化事件

初始化事件在vm上创建一个_events对象,用来存放事件。_events的内容如下:


{
  eventName: [func1, func2, func3]
}
Salin selepas log masuk

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


/*初始化事件*/
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)
 }
}
Salin selepas log masuk

$on

$on方法用来在vm实例上监听一个自定义事件,该事件可用$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)
   // optimize hook:event cost by using a boolean flag marked at registration
   // instead of a hash lookup
   /*这里在注册事件的时候标记bool值也就是个标志位来表明存在钩子,而不需要通过哈希表的方法来查找是否有钩子,这样做可以减少不必要的开销,优化性能。*/
   if (hookRE.test(event)) {
    vm._hasHookEvent = true
   }
  }
  return vm
 }
Salin selepas log masuk

$once

$once监听一个只能触发一次的事件,在触发以后会自动移除该事件。


 Vue.prototype.$once = function (event: string, fn: Function): Component {
  const vm: Component = this
  function on () {
   /*在第一次执行的时候将该事件销毁*/
   vm.$off(event, on)
   /*执行注册的方法*/
   fn.apply(vm, arguments)
  }
  on.fn = fn
  vm.$on(event, on)
  return vm
 }
Salin selepas log masuk

$off

$off用来移除自定义事件


Vue.prototype.$off = function (event?: string | Array<string>, fn?: Function): Component {
  const vm: Component = this
  // all
  /*如果不传参数则注销所有事件*/
  if (!arguments.length) {
   vm._events = Object.create(null)
   return vm
  }
  // array of events
  /*如果event是数组则递归注销事件*/
  if (Array.isArray(event)) {
   for (let i = 0, l = event.length; i < l; i++) {
    this.$off(event[i], fn)
   }
   return vm
  }
  // specific event
  const cbs = vm._events[event]
  /*Github:https://github.com/answershuto*/
  /*本身不存在该事件则直接返回*/
  if (!cbs) {
   return vm
  }
  /*如果只传了event参数则注销该event方法下的所有方法*/
  if (arguments.length === 1) {
   vm._events[event] = null
   return vm
  }
  // specific handler
  /*遍历寻找对应方法并删除*/
  let cb
  let i = cbs.length
  while (i--) {
   cb = cbs[i]
   if (cb === fn || cb.fn === fn) {
    cbs.splice(i, 1)
    break
   }
  }
  return vm
 }
Salin selepas log masuk

$emit

$emit用来触发指定的自定义事件。


Vue.prototype.$emit = function (event: string): Component {
  const vm: Component = this
  if (process.env.NODE_ENV !== &#39;production&#39;) {
   const 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}".`
    )
   }
  }
  let cbs = vm._events[event]
  if (cbs) {
   /*将类数组的对象转换成数组*/
   cbs = cbs.length > 1 ? toArray(cbs) : cbs
   const args = toArray(arguments, 1)
   /*遍历执行*/
   for (let i = 0, l = cbs.length; i < l; i++) {
    cbs[i].apply(vm, args)
   }
  }
  return vm
 }
Salin selepas log masuk

相关推荐:

node事件机制解说

PHP事件机制的实现

jq与js中的事件机制与阻止

Atas ialah kandungan terperinci Vue.js事件机制源码解析. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
2 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Repo: Cara menghidupkan semula rakan sepasukan
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
Hello Kitty Island Adventure: Cara mendapatkan biji gergasi
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Menyelam mendalam tentang maksud dan penggunaan kod status HTTP 460 Menyelam mendalam tentang maksud dan penggunaan kod status HTTP 460 Feb 18, 2024 pm 08:29 PM

Analisis mendalam tentang peranan dan senario aplikasi kod status HTTP 460 Kod status HTTP adalah bahagian yang sangat penting dalam pembangunan web dan digunakan untuk menunjukkan status komunikasi antara klien dan pelayan. Antaranya, kod status HTTP 460 ialah kod status yang agak istimewa Artikel ini akan menganalisis secara mendalam peranan dan senario aplikasinya. Definisi kod status HTTP 460 Takrif khusus kod status HTTP 460 ialah "ClientClosedRequest", yang bermaksud bahawa klien menutup permintaan. Kod status ini digunakan terutamanya untuk menunjukkan

iBatis dan MyBatis: Analisis Perbandingan dan Kelebihan iBatis dan MyBatis: Analisis Perbandingan dan Kelebihan Feb 18, 2024 pm 01:53 PM

iBatis dan MyBatis: Analisis Perbezaan dan Kelebihan Pengenalan: Dalam pembangunan Java, ketekunan adalah keperluan biasa, dan iBatis dan MyBatis ialah dua rangka kerja kegigihan yang digunakan secara meluas. Walaupun mereka mempunyai banyak persamaan, terdapat juga beberapa perbezaan dan kelebihan utama. Artikel ini akan memberikan pembaca pemahaman yang lebih komprehensif melalui analisis terperinci tentang ciri, penggunaan dan kod sampel kedua-dua rangka kerja ini. 1. Ciri iBatis: iBatis ialah rangka kerja kegigihan yang lebih lama yang menggunakan fail pemetaan SQL.

Penjelasan terperinci tentang ralat Oracle 3114: Cara menyelesaikannya dengan cepat Penjelasan terperinci tentang ralat Oracle 3114: Cara menyelesaikannya dengan cepat Mar 08, 2024 pm 02:42 PM

Penjelasan terperinci tentang ralat Oracle 3114: Bagaimana untuk menyelesaikannya dengan cepat, contoh kod khusus diperlukan Semasa pembangunan dan pengurusan pangkalan data Oracle, kami sering menghadapi pelbagai ralat, antaranya ralat 3114 adalah masalah yang agak biasa. Ralat 3114 biasanya menunjukkan masalah dengan sambungan pangkalan data, yang mungkin disebabkan oleh kegagalan rangkaian, pemberhentian perkhidmatan pangkalan data atau tetapan rentetan sambungan yang salah. Artikel ini akan menerangkan secara terperinci punca ralat 3114 dan cara menyelesaikan masalah ini dengan cepat, dan melampirkan kod tertentu

Analisis ciri baharu Win11: Bagaimana untuk melangkau log masuk ke akaun Microsoft Analisis ciri baharu Win11: Bagaimana untuk melangkau log masuk ke akaun Microsoft Mar 27, 2024 pm 05:24 PM

Analisis ciri baharu Win11: Cara melangkau log masuk ke akaun Microsoft Dengan keluaran Windows 11, ramai pengguna mendapati ia membawa lebih banyak kemudahan dan ciri baharu. Walau bagaimanapun, sesetengah pengguna mungkin tidak suka sistem mereka terikat pada akaun Microsoft dan ingin melangkau langkah ini. Artikel ini akan memperkenalkan beberapa kaedah untuk membantu pengguna melangkau log masuk ke akaun Microsoft dalam Windows 11 dan mencapai pengalaman yang lebih peribadi dan autonomi. Mula-mula, mari kita fahami sebab sesetengah pengguna enggan log masuk ke akaun Microsoft mereka. Di satu pihak, sesetengah pengguna bimbang bahawa mereka

Analisis makna dan penggunaan titik tengah dalam PHP Analisis makna dan penggunaan titik tengah dalam PHP Mar 27, 2024 pm 08:57 PM

[Analisis makna dan penggunaan titik tengah dalam PHP] Dalam PHP, titik tengah (.) ialah operator yang biasa digunakan untuk menyambung dua rentetan atau sifat atau kaedah objek. Dalam artikel ini, kami akan menyelami makna dan penggunaan titik tengah dalam PHP, menggambarkannya dengan contoh kod konkrit. 1. Operator titik tengah rentetan Concatenate Penggunaan yang paling biasa dalam PHP adalah untuk menggabungkan dua rentetan. Dengan meletakkan . antara dua rentetan, anda boleh menyambungkannya untuk membentuk rentetan baharu. $string1=&qu

Apache2 tidak boleh menghuraikan fail PHP dengan betul Apache2 tidak boleh menghuraikan fail PHP dengan betul Mar 08, 2024 am 11:09 AM

Disebabkan oleh keterbatasan ruang, berikut ialah artikel ringkas: Apache2 ialah perisian pelayan web yang biasa digunakan, dan PHP ialah bahasa skrip bahagian pelayan yang digunakan secara meluas. Dalam proses membina tapak web, kadangkala anda menghadapi masalah bahawa Apache2 tidak dapat menghuraikan fail PHP dengan betul, menyebabkan kod PHP gagal dilaksanakan. Masalah ini biasanya disebabkan oleh Apache2 tidak mengkonfigurasi modul PHP dengan betul, atau modul PHP tidak serasi dengan versi Apache2. Secara umumnya terdapat dua cara untuk menyelesaikan masalah ini, satu

Parsing Wormhole NTT: rangka kerja terbuka untuk sebarang Token Parsing Wormhole NTT: rangka kerja terbuka untuk sebarang Token Mar 05, 2024 pm 12:46 PM

Wormhole ialah peneraju dalam kebolehkendalian blockchain, memfokuskan pada mencipta sistem terdesentralisasi yang berdaya tahan, kalis masa hadapan yang mengutamakan pemilikan, kawalan dan inovasi tanpa kebenaran. Asas visi ini ialah komitmen terhadap kepakaran teknikal, prinsip etika dan penjajaran komuniti untuk mentakrifkan semula landskap kebolehoperasian dengan kesederhanaan, kejelasan dan rangkaian luas penyelesaian berbilang rantaian. Dengan peningkatan bukti pengetahuan sifar, penyelesaian penskalaan dan piawaian token yang kaya dengan ciri, rantaian blok menjadi lebih berkuasa dan kesalingoperasian menjadi semakin penting. Dalam persekitaran aplikasi yang inovatif ini, sistem tadbir urus baharu dan keupayaan praktikal membawa peluang yang belum pernah berlaku sebelum ini kepada aset merentas rangkaian. Pembina protokol kini bergelut dengan cara untuk beroperasi dalam pelbagai rantaian yang muncul ini

Analisis fungsi eksponen dalam bahasa C dan contoh Analisis fungsi eksponen dalam bahasa C dan contoh Feb 18, 2024 pm 03:51 PM

Analisis terperinci dan contoh fungsi eksponen dalam bahasa C Pengenalan: Fungsi eksponen ialah fungsi matematik biasa, dan terdapat fungsi perpustakaan fungsi eksponen sepadan yang boleh digunakan dalam bahasa C. Artikel ini akan menganalisis secara terperinci penggunaan fungsi eksponen dalam bahasa C, termasuk prototaip fungsi, parameter, nilai pulangan, dsb. dan memberikan contoh kod khusus supaya pembaca dapat memahami dan menggunakan fungsi eksponen dengan lebih baik. Teks: Fungsi perpustakaan fungsi eksponen math.h dalam bahasa C mengandungi banyak fungsi yang berkaitan dengan eksponen, yang paling biasa digunakan ialah fungsi exp. Prototaip fungsi exp adalah seperti berikut

See all articles