06——Vue生命周期函数（钩子函数的理解）

生命周期：顾名思义就是生命从开始到结束，在vue中就是vue实例从生成到销毁的过程。

钩子函数: 在某个特定的时间自动执行的函数（类似于自执行函数只不过有特定的时期执行）

在vue中，不只是生命周期中有钩子函数，例如路由里面也有钩子函数（例如，导航守卫函数就是路由的钩子函数），这里主要介绍的是生命周期中的钩子函数

那这个东西有啥用呢：使用场景就是  例如我们在methods写了一个请求数据的方法qq，需求是当页面一加载就要自动调用这个请求方法获取数据 然后渲染到页面上（例如首页的轮播图，首页的其他展示数据，肯定是页面一加载就要展示出来数据，不可能说写的数据还要弄个按钮去点击调用一下这个请求方法才展示）

那我们如何让他去自动触发请求呢：写个自执行函数？不，这时就可以使用钩子函数去自动触发请求方法实现需求。

在vue中，生命周期中一共有八个钩子函数，这八个钩子函数就是vue的整个执行过程的每一个阶段。

Vue把生命周期分为 4个大阶段，每一个大阶段里有2个小阶段 一共8个：

创建之前：beforeCreate  ——— vue实例还没创建时view层和data层都没东西

创建之后：created —— vue实例已创建时 data里面已经有数据 但view层没东西

渲染之前：beforeMount —- 此时data有数据，但页面没东西 因为没渲染

渲染之后：mounted  —- 渲染完成时，页面上已经能看到东西了

更新之前：beforeUpdate —- 当data里面的数据发生改变之前

更新之后：updated  —- data数据已经发生了改变 数据已经更新时（似watch属性）

销毁之前：beforeDestory — 数据销毁之前

销毁之后：destoryed  —— 数据销毁之后

像首页一加载就显示数据的这种需求，就使用creted这个钩子函数去调用即可。

具体写法：

生命周期里的钩子函数和 data，methods都是同级别的属性（vue实例下的一级属性）然后把想要自动执行的方法在created函数里面调用一下即可，也可以直接把你的方法写在creted函数里面，但一般都是把函数放在methods属性里面，然后放在钩子函数里面调用即可。

在methods属性里面有一个方法 fn

    methods: {
            fn(){
                alert("我是created钩子函数自动触发的")
            }

        },

把这个fn方法放在created钩子函数里面调用一下，就会在页面一加载即可自动执行

  created () {
            // 这里调用需要自动执行的方法
            this.fn()
        },

小总结：

钩子函数就是在某个特定时间自动执行的函数，我们使用的时候，如果想要页面一加载就自动执行的方法，就放在created里面调用，如果想要数据一更改就自动执行的方法，就放在updated里面调用，剩下的用法一样，看需求选择合适的钩子函数去调用你的方法。

最常用的两个钩子函数是created和mounted，created函数是页面数据加载完成就执行，mounted函数是页面渲染完成时执行。