Vue related, Vue life cycle and corresponding behavior

Let's start with a classic picture

 

 

 

Life hook function

 Friends who use vue know that the life cycle function looks like this ~

mounted: function() {
}
// 或者
mounted() {
}

• Note that all life cycle functions of Vue are automatically bound to this context. Therefore, if you use the arrow function here, the parent scope pointed to by this will appear and an error will be reported.

// wrong usage 
mounted :() => { 
}

 

beforeCreate

 

 

After the instance is initialized, the data observes and exposes some useful instance properties and methods.

Instance initialization-new Vue()

Data observation-adding all the data in the data object to the vue responsive system, this involves two-way binding of vue

Exposed attributes and methods-are some of the attributes and methods that come with the vue instance. We can see an example on the official website. The attributes and methods with $ in the example are the ones that come with the vue instance, which can be distinguished from user-defined

var data = {a: 1 }
 var vm = new Vue ({ 
  el: '#example' , 
  data: data 
}) 

vm. $ data === data // => true 
vm. $ el === document.getElementById ('example') // => true 

// $ watch is an instance method 
vm. $ watch ('a', function (newValue, oldValue) {
   // this callback will be called after `vm.a` changes 
})

created

• Influence of el attribute on life cycle

 

 

 

 

// When there is el attribute, 
new Vue ({ 
el: '#app' , 
beforeCreate: function () { 
  console.log ( 'Called beforeCreate' ) 
}, 
created: function () { 
  console.log ( 'Called created ' ) 
}, 
beforeMount: function () { 
  console.log ( ' Called beforeMount ' ) 
}, 
mounted: function () { 
  console.log ( ' Called mounted ' ) 
} 
}) 

// output the result 
// called beforeCreate 
// Called created
// Called beforeMount 
// Called mounted

// Without the el attribute, there is no vm. $ Mount 

new Vue ({ 
beforeCreate: function () { 
  console.log ( 'Called beforeCreate' ) 
}, 
created: function () { 
  console.log ( 'Called created ' ) 
}, 
beforeMount: function () { 
  console.log ( ' Called beforeMount ' ) 
}, 
mounted: function () { 
  console.log ( ' Called mounted ' ) 
} 
}) 

// output the result 
// called beforeCreate 
// Called created

// Without the el attribute, but there is vm. $ Mount method 

var vm = new Vue ({ 
beforeCreate: function () { 
  console.log ( 'Called beforeCreate' ) 
}, 
created: function () { 
  console. log ( 'Called created' ) 
}, 
beforeMount: function () { 
  console.log ( 'Called beforeMount' ) 
}, 
mounted: function () { 
  console.log ( 'Called mounted' ) 
} 
}) 

vm. $ mount ( '#app' ) 

// Output result 
//Call beforeCreate 
// call the Created 
// call beforeMount 
// calls mounted

• Effect of template attribute on life cycle

 

 

 

There are three cases:

1. When there is a template attribute inside the instance, use the internal one directly, and then call the render function to render.

2. If no template is found inside the instance, external html is called. The template attribute inside the instance has a higher priority than the outside.

3. If the first two are not satisfied, then throw an error.

Let's look at the following examples:

new Vue ({ 
  el: '#app' , 
  template: '<div id = "app"> hello world </ div>' 
}) 

// hello world is rendered on the page

<div id = "app"> hello world </ div> new Vue ({ 
  el: '#app' 
}) // Hello world is rendered on the page

// When both exist,
 
<div id = "app"> hello world2 </ div> new Vue ({ 
  el: '#app' , 
  template: '<div id = "app"> hello world1 </ div> ' 
}) // Hello world1 is rendered on the page

It can be seen from the above example that internal takes precedence over external.

• Some questions about this life cycle:

1. Why is the judgment of the el attribute before the template? Because el is a selector, such as the id selector app we used most in the above example, the vue instance needs to use this el to find the corresponding one in the template.

2. In fact, there is also a render option in the vue instance, we can look at his usage from the documentation:

new Vue({
  el: '#app',
  render() {
    return (...)
  }
})

3. The rendering priority of the above three: render function> template attribute> external html

4. vue compilation process-the process of compiling tempalte into render function.

 

beforeMount和mounted

 

First look at an example:

<div id="app">
  <p>{{message}}</p>
</div>new Vue({
  el: '#app',
  data: {
    message: 1
  },
  beforeMount: function() {
    console.log('调用了beforeMount');
    console.log(this.message)
    console.log(this.$el)
  },
  mounted: function() {
    console.log('调用了mounted');
    console.log(this.message)
    console.log(this.$ el) //
})
  }



Output result: 
// beforeMount 
// 1 
// <div> 
// </ div> 

// called mounted 
// 1 
// <div id = "app"> 
//   <p> 1 </ p > 
// </ div>

 

beforeUpdate和updated

 

In this process, we will find that when a data changes, your view will change accordingly.

The entire update process is: data changes-leading to changes in the virtual DOM-call these two life hooks to change the view

• Important: This data will only be updated if it is bound to the data in the template.

// No binding 

var vm = new Vue ({ 
  el: '#app' , 
  template: '<div id = "app"> </ div>' , 
  beforeUpdate: function () { 
    console.log ( 'Call BeforeUpdate ' ) 
  }, 
  updated: function () { 
    console.log ( ' called uodated ' ) 
  }, 
  data: { 
    a: 1 
  } 
}) 

vm.a = 2
 // this situation is nothing in the console Will output.

 

var vm = new Vue ({ 
  el: '#app' , 
  template: '<div id = "app"> {{a}} </ div>' , 
  beforeUpdate: function () { 
    console.log ( 'Called beforeUpdate ' ) 
  }, 
  updated: function () { 
    console.log ( ' Called uodated ' ) 
  }, 
  data: { 
    a: 1 
  } 
}) 

vm.a = 2 // Output result: 
// BeforeUpdate 
// Called uodated

beforeDestory和destoryed

 

Before the beferoDestory life hook is called, all instances are available.

But when called, everything indicated by the Vue instance will be unbound, all event listeners will be removed, and all child instances will also be destroyed.

A few simple pages of other life hooks

• activated: called when the component is activated
• deactivated: called when the component is deactivated
• errorCaptured: This life hook can be viewed on the official website, only after 2.5.0. Called when an error from a descendant component is caught.

Finally, we use an example to go through the life cycle

let vm = new Vue({
  el: '#app',
  data: {
    message: 1
  },
  template: '<div id="app"><p>{{message}}</p></div>',
  beforeCreate() {
    console.log('调用了beforeCreate')
    console.log(this.message)
    console.log(this.$el)
  },
  created() {
    console.log('调用了created')
    console.log(this.message)
    console.log(this.$el)
  },
  beforeMount() {
    console.log('调用了beforeMount')
    console.log(this.message)
    console.log(this.$el)
  },
  mounted() {
    console.log('调用了mounted')
    console.log(this.message)
    console.log(this.$el)
  },
  beforeUpdate() {
    console.log('调用了beforeUpdate')
    console.log(this.message)
    console.log(this.$el)
  },
  updated() {
    console.log('调用了updated')
    console.log(this.message)
    console.log(this.$el)
  },
  beforeDestory() {
    console.log('调用了beforeDestory')
    console.log(this.message)
    console.log(this.$el)
  },
  destoryed() {
    console.log('调用了Destoryed')
    console.log(this.message)
    console.log(this.$el)
  }
})

vm.message = 2

// Called beforeCreate 
// undefined 
// undefined 
// Called created 
// 1 
// undefined 
// Called beforeMount 
// 1 
// <div> </ div> 
// Called mounted 
// 1 
// < div id = "app"> <p> 1 </ p> </ div> 
// beforeUpdate 
// 2 
// <div id = "app"> <p> 2 </ p> </ div> 
/ / Called updated 
// 2 
// <div id = "app"> <p> 2 </ p> </ div>