vue2 生命周期钩子函数

什么是生命周期

从Vue实例创建、运行、到销毁期间，总是伴随着各种各样的事件，这些事件，统称为生命周期

vue生命周期钩子函数

每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。

生命周期（从无到有再到无）

beforeCreated（实例创建前）

此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data等上的方法和数据

created （实例创建后）

  在 created 中，data 和 methods 都已经被初始化好了，但是还没有渲染页面，如果要调用 methods 中的方法，或者操作 data 中的数据，最早，只能在 created 中操作。一般用于数据的初始化和处理，请求数据接口操作

beforeMount（实例挂载前）

用于在挂载之前使用,在这个阶段是获取不到dom操作的,把data里面的数据和模板生成html，完成了data等初始化,注意此时还没有挂在html到页面上

mounted（实例挂载后）

用于挂载之后使用，已经真实的挂载到了页面中，用户已经可以看到渲染好的页面了，在这个时候可以获取到dom操作，比如可以获取到ref等，操作的dom，在这个时候el和data都可以获取的到

beforeUpdate（实例更新前）

在数据更新之前被调用，页面中的显示的数据，还是旧的，此时 data 数据是最新的，页面尚未和 最新的数据保持同步

update（实例更新后）

事件执行的时候，页面和 data 数据已经保持同步了，都是最新的，所以可以执行依赖于DOM的操作

beforeDestroy（实例销毁前）

在这个时候还是可以用this来获取，可以用于销毁计时器时候使用，为了防止跳转到其它页面该事件还在执行，还可以清除dom事件等

destroy（实例销毁后）

在实例销毁之后调用，此时this已经不能访问

// html
<div v-for="(item,index) in list" :key="index">
   <div>{{item}}</div>
</div>
// vue
beforeCreate() {
    console.log('beforeCreate触发');
    console.log(this.list);
},
created() {
    console.log('created');
    console.log(this.list);
    console.log('定时器开始');
    setTimeout(()=>{
        this.list = [1,2,3,4,5]
    },3000)
},
beforeMount() {
    console.log('beforeMount');
},
mounted() {
    console.log('mounted');
},
beforeUpdate() {
    console.log(this.list);
    console.log('beforeUpdate');
},
updated() {
    console.log('updated');
},