Design with multiple changes and only one update

Each time data is modified, dependency updates of the data are triggered. So, if you make three changes, you should call the update function three times, but it will only be called once.

Data change monitor

If the data changes, the set method is used, and then dep.notify is executed

Depend on the update

  1. If a property in data is modified in the event callback, the dependency will be updated and watcher.update will be executed.
  2. If the watcher attribute is changed, it is the same watcher. If the watcher attribute is changed, it is the same watcher. If the watcher is changed, it is the same Watcher.

Vue nextTick source code analysis

General execution steps:

  1. Place registered callback functions in the Callbacks queue;
  2. Check whether pending is executed;
  3. Watcher.run () performs dependency updates;
  4. Watcher.prototype.update calls nextTick;
  5. Calling vue.$nextTick manually is like adding a queue to callbacks. Callbacks iterate through each registration event, including water. Update patchNode, before executing the second nextTick callback. Therefore, nextTick implements asynchronous update, and the updated content of DOM nodes can be obtained from nextTick.

nextTick

  1. Cb callbacks are pushed into the Callbacks array through uniform processing
  2. Execute asynchronous delay function and set flag bit to judge
  3. Returns a promise-like call when nextTick passes no function arguments

flushCallbacks

FlushCallbacks is used to execute the callback function in callbacks

  1. Copy the callbacks
  2. Empty the original callbacks
  3. Iterate through the replicated Callbacks and execute them one by one

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