• This article has participated in the “Digitalstar Project” and won a creative gift package to challenge the creative incentive money.

The template options

About el

Provide a DOM element that already exists on the page as the mount target for the Vue instance. It can be a CSS selector or an instance of an HTML element.

If this option is present at instantiation time, the instance will start compiling immediately; otherwise, you need to explicitly call vm.$mount() to manually start compiling.

template

A string template is used as the identity of the Vue instance. The template replaces the mounted elements, and the contents of the mounted elements are ignored.

<div id="app"></div>
Copy the code
const vm = new Vue({
  el: '#app'.template: ` 
      

       xxx
      
 `,})Copy the code

Vue initialization to mount process

​

Vue life cycle

Each Vue instance goes through a series of initialization procedures when it is created, such as setting up data listeners, compiling templates, mounting the instance to the DOM, and updating the DOM as the data changes. Functions called lifecycle hooks are also run along the way, giving users the opportunity to add their own code at different stages.

Life cycle diagram

​

Lifecycle hook

All lifecycle hooks automatically bind this context to the instance, so you can access data and perform operations on properties and methods

​

beforeCreate

After instance initialization, data Observer and Event/Watcher events are called before configuration.

<div id="app">
  <div @click="handleClick">Click on the event</div>
</div>
Copy the code
const vm = new Vue({
  el: '#app'.data: {
    msg: 'hellow world',
  },
  beforeCreate () {
    console.log(this.msg);    // undefined
    console.log(this.handleClick);   // undefined
    console.log('-----beforeCreate-----'); 
  },
  methods: {
    handleClick () {
      console.log(handleClick); }},watch: {
    msg: {
      handler () {
        console.log('Listen for MSG value'); 
      },
      immediate: true,}}})Copy the code

Print order:

undefined
undefined-----beforeCreate----- listens to the value of MSGCopy the code

created

Called immediately after the instance is created.

In this step, the instance completes the configuration of data Observer, property and method operations, and Watch/Event event callbacks.

If you want to call a method in methods or manipulate data in data the first time, you can do so in this hook. Note that the mount phase has not yet started when this hook is executed, and the $EL attribute is not currently visible.

At this point, you can make a data request and assign the requested value to the data in data.

<div id="app">
  <div @click="handleClick">Click on the event</div>
</div>
Copy the code
const vm = new Vue({
  el: '#app'.data: {
    msg: 'hellow world',
  },
  created () {
    console.log(this.msg);   // hello world
    console.log(this.handleClick);   // function () {... }
    console.log(this.$el);   // undefined
    console.log('----------created-------');
  },
  methods: {
    handleClick () {
      console.log(handleClick); }},watch: {
    msg: {
      handler () {
        console.log('Listen for MSG value'); 
      },
      immediate: true,}}})Copy the code

Print order:

ƒ Hellow world ƒ handleClick () {console.log(handleClick); }
undefined
----------created-------
Copy the code

beforeMount

Called before the mount begins, when the template has been compiled, except that the generated template has not replaced the element corresponding to el.

In this hook function, you can get the initial state of the template.

At this point, you can get vm.$el, just the old template

const vm = new Vue({
  el: '#app',
  beforeMount () {
    console.log(this.$el); }})Copy the code

mounted

El is replaced by the newly created vm.$el, which is called after being mounted to the instance.

The vm.$el in this hook function is the new template.

After executing the hook function, the instance is fully created.

If you want to manipulate a DOM node on the page in the first place, you can do so in this hook function

const vm = new Vue({
  el: '#app',
  mounted () {
    console.log(this.$el); }})Copy the code

beforeUpdate

Called when data is updated and occurs before the virtual DOM is patched. At this point the data has been updated, but the DOM has not been updated

<div id="app">
  {{ msg }}
</div>
Copy the code
const vm = new Vue({
  el: '#app'.data: {
    msg: 'hellow world',
  },
  beforeUpdate () {
    console.log(this.msg);
    console.log(this.$el);
  },
  methods: {
    handleClick () {
      console.log('handleClick'); }}})this.msg = 'xxx';
Copy the code

updated

This hook function is executed after a data change causes the DOM to be re-rendered.

The data is now synchronized with the DOM.

beforeDestroy

Called before instance destruction. At this step, the instance is still fully available.

In this hook function, the timer can be cleared.

<div id="app">
  {{ msg }}
</div>
Copy the code
const vm = new Vue({
  el: '#app'.data: {
    msg: 'hellow world'.timer: 0,
  },
  created () {
    this.timer = setInterval(() = > {
      console.log('xxx');
    }, 500)
  },
  beforeDestroy () {
    clearInterval(this.timer); }})Copy the code

destroyed

Called after the Vue instance is destroyed. After the invocation, everything indicated by the Vue instance is unbound and all event listeners are removed.

The last

If it is helpful to you, I hope I can give 👍 comment collection three even!

Bloggers are honest and answer questions for free ❤

Welcome to discuss in the comments section, the excavation officials will draw 100 nuggets in the comments section after the end of the Excavation project activity, see the details of the lucky draw in the event article, friends to discuss!!