preface

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

Method execution timing

After beforeCreate and before created, initState is called

InitProps is called in initState

Source code analysis

initProps

The code above does three things:

  1. Traverse the props
  2. Set the props to reactive
  3. Set up the props agent

defineReactive

Set the props to reactive

  1. Object.defineproperty-get, for dependency collection;
  2. Object.defineproperty-set, used for dependency updates;
  3. Each property declared by data has its own dependency collector subs;
  4. The dependency collector subs holds the dependency watcher;
  5. Watcher can be used for view updates;

proxy

Set up the props agent

If you want to call this. XXX for Props, you are actually calling this._props.

  1. Use props as placeholder on the VM so that the props can be accessed in the form of vm. XXX.
  2. DefineProperty get and set to get and assign vm._props indirectly. All operations on the props are forwarded to vM. _props.