【Vue】Vue生命周期-蒲公英云

【Vue】Vue生命周期

1. Vue生命周期是什么？

在每个Vue实例在被创建时，都会经过创建、初始化数据、模板编译、挂载DOM，数据更新使得DOM更新、实例卸载等一系列的过程。这一系列过程就是Vue的生命周期。

简单来说，Vue实例从初始化到销毁的过程就是Vue的生命周期。在这个过程中，会有一些生命周期钩子函数用户可以在不同阶段的钩子函数中添加相应的业务代码。

下图是Vue官网中给出的Vue生命周期的图示：

在这里插入图片描述

2. 生命周期钩子

简单来介绍一下生命周期钩子：

beforeCreate ：创建实例之前创建的钩子
created ：实例创建完成后执行的钩子
beforeMounted ：将编译完成的HTML挂载到对应虚拟DOM时触发的钩子，此时页面没有内容
mounted ：将编译好的HTML挂载到页面完成后执行的事件钩子
beforeUpdata ：DOM更新之前的钩子
upDated ： DOM更新之后的钩子
beforeDestroy ：实例销毁之前执行的钩子
destroyed ：实例销毁完成执行的钩子

再对每个钩子分别进行举例说明：

2.1 beforeCreate

beforeCreate是发生在实例初始化之后，创建实例之前的钩子事件。

在这个过程中会创建一个Vue实例，此时实例上只有一些生命周期函数和默认的事件，此时data computed watch methods上的方法和数据均不能访问：

const vm = new Vue({ 
      el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      beforeCreate() { 
        console.log('beforeCreate');
        console.log(this.$data);
        console.log(this.$el);
        console.log(this);
      }
    })

打印结果：
在这里插入图片描述

2.2 created

这是实例创建完成后的钩子，此时我们可以读取data的值，并可以对其进行操作，把方法、计算属性也都挂载到了实例。但是依旧不能访问el，不能获取到DOM元素。

在这个钩子函数中，我们可以进行数据请求，并把请求到的数据储存在data中。但是请求的数据不宜过多。

const vm = new Vue({ 
      el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      created() { 
        console.log('created');
        console.log(this.$data);
        console.log(this.$el);
        console.log(this);
      }
    })

打印结果：
在这里插入图片描述

2.3 beforeMounted

在这个钩子中，首先会判断el的挂载方式，挂载方式有两种：el:'#app' 和 vm.$mount('#app')，然后判断是否有指定的template选项，如果有就将template编译到render函数中，没有则将el外部的HTML作为template 编译。

这个过程将template进行渲染保存到内存当中，但是还未挂载在页面上。

const vm = new Vue({ 
      // el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      beforeMount() { 
        console.log('beforeMount');
        console.log(this.$data);
        console.log(this.$el);
        console.log(this);
      }
    })
    vm.$mount('#app')

打印结果：
在这里插入图片描述

2.4 mounted

在这个钩子中，会将实例挂载到DOM上，我们可以操作页面上的DOM，一般会在此钩子函数中做一些数据请求获取数据，进行数据初始化。 mounted在整个实例中只执行一次。

const vm = new Vue({ 
      // el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      mounted() { 
        console.log('mounted');
        console.log(this.$data);
        console.log(this.$el);
      }
    })
    vm.$mount('#app')

打印结果：
在这里插入图片描述

2.5 beforeUpdata

在此钩子中，data中的数据已经进行了更新，但是页面数据并没有进行更新

const vm = new Vue({ 
      // el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      beforeUpdate() { 
        console.log('beforeUpdata');
        console.log(this.test);
        debugger
      }
    })
    vm.$mount('#app')
    vm.test = 'hello javascript'

打印结果：
在这里插入图片描述

2.6 upDated

将data中的最新数据渲染出DOM，并将最新的DOM挂载页面，此时data数据与页面数据一致：

const vm = new Vue({ 
      // el: '#app',
      data() { 
        return { 
          test: 'hello vue'
        }
      },
      updated() { 
        console.log('updated');
        console.log(this.test);
      }
    })
    vm.$mount('#app')
    vm.test = 'hello javascript'