Changes to the data drive updates to the view

MVVM: model-view-viewModel, data-driven View

MVC: Model-View-Controller

Vue 2.x

init

  • Parse the template as the Render function (or completed in the development environment, vue-loader)
  • Trigger reactive, listen for the data property getter
  • Execute render function to generate vNode
  • path(elem, vnode)

Data update

  • Modify data to fire the setter (previously listened on in the getter)
  • Re-execute the render function to generate newVnode
  • path(vnode, newVnode)

Vue is executed asynchronously when updating the DOM. As soon as the data changes are listened for, Vue opens a queue,And buffer all data changes that occur in the same event loop.

In simple terms, an event loop executes all macro-tasks first and then micro-tasks. Vue inserts all updates into a queue and calls the microtask when the queue is empty. MutationObserver, Promise. then, etc., are microtasks (setTimeout belongs to macro tasks).

Manipulating the Dom is expensive

For example, an operation may insert 10 DOM. Js is executed in a top-down order by a single thread. When the computer encounters the first DOM operation, it will immediately perform computational rendering, and then the second dom operation may be wasted. The existence of virtual Dom will cache the above 10 times as one execution and combine all Dom operations in the same event cycle into one update, and compare the differences between the old and new VDOM under the Diff algorithm, and then conduct one-time Dom operations with the help of Document Fragment

Information:

Vue core principle full solution