Dependency injection

Advantages:

  1. The ancestor component does not need to know which descendant components use the properties it provides;
  2. Descendant components do not need to know where the injected property came from;

Disadvantages:

  1. The coupling between components is relatively close and difficult to reconstruct;
  2. The supplied properties are non-reactive;

Source code analysis

Vue.prototype._init is invoked when the component instance is initialized, and the vm._init calls initInjections before data/props and initProvide after data/props

initInjections

This method mainly does the following two things:

  1. Obtain vm.$options.inject and find the corresponding key set by resolveInject.
  2. Iterate over the key set and respond to it;

resolveInject

This method realizes that the parent node data can be looked up by $parent.

  1. $parent = $parent; $parent = $parent

initProvide

This method simply assigns the component’s registered provide value to vm._provided, used in resolveInject

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