(1) VUE life cycle: the process of vUE instance from creation to destruction, that is, the process of creating, initializing data, compiling templates, mounting DOM and rendering, updating, rendering and unloading. The beforeCreate function is called after the instance initialization and before the event/ Watcher event configuration. This variable is not available at this time. Events in Watcher cannot be retrieved from data or methods. Function: This phase can be loaded

data() {
  return {
    num:0}}methods: {
  show() {
    console.log(The '-')}}beforeCreate() {
  console.log(this.num) //undefined
  console.log(this.show)  //undefined
}
Copy the code

B. Created official website: the instance is invoked immediately after it is created. In this step, the example has been configured to perform operations on the data Observer properties and methods, and the watch/ Event event callback. However, the mount phase has not yet started and the $EL attribute is not currently visible. Explanation: At this point, you can manipulate the data and various methods in the VUE instance, but not yet the “DOM” node; Role: Ajax requests can be sent at this stage; You can turn off loading

data() {
  return {
    num:0}}methods: {
  show() {
    console.log(The '-')}}beforeCreate() {
  console.log(this.num) / / 0
  console.log(this.show)  //---
}
Copy the code

C. beforeMount 官网 : called before the mount begins: the relevant render function is called for the first time. D. mounted 官 方 : When the instance is mounted, the vm el is replaced by the vm.$el. If the root instance is mounted to an element in a document, vm.$el is also in the document when Mounted is called. Note: Mounted does not ensure that all child components are mounted at the same time. If you want to wait until the entire view is rendered, use vm.$nextTick inside Mounted

mounted: function () {
  this.$nextTick(function () {
    // After DOM updates, this can be bound to the current instance})}Copy the code

E. BeforeUpdate official website: This parameter is invoked when data is updated and occurs before the virtual DOM is patched. This is a good place to access the existing DOM before updating, rather than manually removing event listeners that have been added. F. Updated official website: This hook is invoked after virtual DOM rerenders and patches due to data changes. When this hook is called, the component DOM has been updated, so you can now perform DOM-dependent operations. However, in most cases, you should avoid changing states in the meantime. If you want to change state accordingly, it is usually best to use calculated properties or Watcher instead. Note: Note that the updated does not guarantee that all child components will also be redrawn at the same time. If you want to wait until the entire view is redrawn, use vm.$nextTick in its updated

updated: function () {
  this.$nextTick(function () {
    // After DOM updates, this can be bound to the current instance})}Copy the code

G. activated: invoked when a keep-alive cached component is activated. H. deactivated 官 website: Called when a component cached by keep-Alive is disabled. I. BeforeDestroy 官网 : called before instance destruction. At this step, the instance is still fully available. Called after the instance is destroyed. When this hook is called, all instructions for the Vue instance are unbound, all event listeners are removed, and all subinstances are destroyed.