Vue的生命周期

为什么要了解vue 的生命周期

如果只是了解vue的语法，也可以根据你的想法实现自己的需求，但是一旦出现问题，就要借助于生命周期去寻找原因，解决问题。另外，有一些需求也需要我们通过生命周期来实现，决定我们把方法写在哪个周期里。

生命周期

vue官网对生命周期有个详细的解释，如图：

生命周期

图中红色部分是生命周期涉及到的钩子函数。

钩子函数

首先是第一个钩子函数。

beforeCreate：此时vue对象还没有产生，具体应用中，可以在此处做一些类似加载动画的东西。

紧接着是created。

created：此时组件已经被创建好，属性也已经被绑定，但是此时DOM还并未生成，el属性还不存子啊。此时可以做什么呢？此时可以获取一些对应的数据，比如请求网络接口，把从接口获取的数据赋给属性，以便在DOM里展示，通常也会在此时结束上一步里的加载动画等操作。

再往下，会查找是否有el属性。el属性即：

如果有，会继续检查是否有template属性；如果没有，会检查new Vue后面是否有el属性，即：

如果两者都没有el属性，声明周期就结束了。如果有一个，进行下一步，检查是否有template。
继续往下，如果有template组件，则会执行render方法，来渲染template中对应的内容；

如果没有template组件，查看是否有el外部的html标签可以作为template编译：

如果两者都没有，生命周期结束，因为没有可以渲染的内容。

然后进入下一个钩子函数。

beforeMount：此时开始编译template中的内容，但是实在虚拟DOM中执行，也就是说，此时还不能看到页面。

编译之后开始挂载。之后是mounted。

mounted：此方法结束的时候，页面已经显示。如果有一些内容是需要页面显示之后再操作的，就可以卸载mounted函数里面。比如，如果需要在当前页面显示之后再获取数据，就可以写在此处。

挂载之后，DOM生成，此时便可以对DOM进行操作，比如增删改查数据之类的。

beforedUpdate：更新组件之前，更新之前如果要进行一些操作的话，可以在此处实现，比如刷新动画。

updated：更新完成，页面已经展示。一般情况下，如果需要在当前组件中做一些改变的话，可以调用此函数。

接着如生命周期的尾部。

beforeDestory：销毁之前。

destoryed：销毁，生命周期结束。

示例

下面的代码，可以直观的展示生命周期里钩子函数执行的顺序。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div id="app">
    <h2>{{message}}</h2>
    <button @click ="changeText">改变文字</button>
</div>
<script src="vue.js"></script>
<script>
    new Vue({
        el:"#app",
        data:{
            message:'你好啊',

        },
        methods:{
            changeText:function(){
                this.message += ' 蝙蝠侠！'
            }
        },
        beforeCreated:function(){
            alert("组件实例化之前执行的函数")
        },
        created:function(){
            alert('组件实例化完成，但页面未显示')
        },
        beforeMount:function(){
            alert('组件挂载前，页面未显示，但虚拟DOM已经配置')
        },
        mounted:function(){
            alert('组件挂载后，页面显示')
        },
        beforeUpdate:function(){
            alert('组件更新前，页面未更新，虚拟DOM已经配置')
        },
        updated:function(){
            alert('组件更新后，页面已更新')
        },
        beforeDestory:function(){
            alert('组件销毁前')
        },
        destroyed:function(){
            alert('组件销毁后')
        }
    })
</script>

</body>
</html>