Vue life cycle description

  1. beforeCreate

Initialize the lifecycle, some of vue’s native events and methods, and render, while properties defined in data, methods, and so on are not yet accessible.

. omit//
initLifecycle(vm)
initEvents(vm)
initRender(vm)
callHook(vm, 'beforeCreate')
Copy the code
  1. created

The instance is created and data is initialized. At this point, data on Data, Methods, computed, and Watch can be accessed.

  1. beforeMount

The virtual DOM is created, will be rendered, and is called before mounting, with the relevant Render function called for the first time.

  1. mounted

At the end of mount stage, data and real DOM are processed, page rendering is completed, and bidirectional binding is completed.

  1. beforeUpdate

Triggered when data changes before the render view is updated.

  1. updated

Data changes complete, view rendering complete.

  1. beforeDestory

The instance is still available (remove components, remove child components, and listen) until it is destroyed.

  1. destroyed

After the instance is destroyed, the life cycle ends.

What is the difference between computed and Watch in Vue?

  1. Computed computes a new property and mounts it to a Vue instance, whereas watch listens for data that already exists and is mounted to a Vue instance, so you can use watch to listen for changes in computed properties.
  2. Computed by nature is a lazy-evaluated observer, cacheable, and computed only when a dependency changes and a new computed value is accessed for the first time. On the other hand, watch calls the execution function when the data is sent.
  3. In terms of usage scenarios, computed applies to one data affected by multiple data, while Watch uses one data to affect multiple data.