Source code analysis

initEvents

Vue.prototype._init is called when the component instance is initialized, and initEvents is called in vm._init

The initEvents function does the following:

  1. Add a _events object to the instance to hold custom events
  2. Gets the custom event that the parent binds to the child
  3. Call updateComponentListeners to start the process

updateComponentListeners

Unbind on unbind on unbind off

$emit

Why bind custom events to child components that can be fired in child components like the following?

this.$emit('visibleChange',value);
Copy the code
<login :isLoginVisible="isLoginVisible" @visibleChange="isLoginVisibleChange"></login>
Copy the code

Because component-bound custom events and Vue custom events are registered using the same method, both exist in the same VM._events

Vue series of courses

Vue source code analysis will be conducted in succession recently, a series of courses are as follows:

The state series

  1. Principle of props
  2. Principle of the methods
  3. Principle of the data
  4. Principles of the computed
  5. Watch the principle

Lifecycle series

  1. Life cycle principle

The event series

  1. Principle of the event

Render series

  1. Render principle

Inject/dojo.provide series

  1. Inject/dojo.provide principle

The plugins series

  1. Vue – principle of the router
  2. Vue Router stuff
  3. Vuex something you should know
  4. Vue source code analysis of vuex principle
  5. Vue custom plug-in

Component series

  1. Keep alive – principle
  2. Vue single file component
  3. Communication between Vue components
  4. Vue virtual list

Series of instructions

  1. Vue custom command
  2. Caching principles for vue source code parsing

The algorithm series

  1. Principle of diff
  2. Vue compiler source code analysis

Asynchronous tasks

  1. NextTick principle of vUE source code parsing

other

  1. Vue unit tests
  2. Vue multicast components
  3. Things you didn’t know about Vue
  4. Vue skills big decryption
  5. Interview – VUE data responsive implementation of advanced front-end