给大家介绍一下vue2里面常用的生命周期（钩子函数）

简单来说vue生命周期就是：vue实例从创建到销毁的过程;主要是在不同的时段执行不同的事情;
我们常用的一共有八个：beforeCreate 创建前、 created创建后、beforeMount 挂载前、mounted挂载后、beforeUpdate 更新前、updated更新后、beforeDestory 销毁前、 destoryed销毁后,

<template>
    <div>
        //页面
        <div ref="divbox">我是一个div</div>
        <div>{{num}}</div>
        <button @click="add">加1</button>
        <button @click="$router.push('/info')">去info页面</button>
   </div>
</template>

<script>
    export default {
        name: "list",
        data:function(){
          return {
              num: 10
          }
        },
        methods:{
            add(){
                this.num++
                console.log(this.num);
            }
        },
        beforeCreate(){
            //创建之前都获取不到： data内的值以及 dom元素
            console.log('beforeCreate',this.num) // 获取data  beforeCreate undefined
            console.log('beforeCreate',this.$refs.divbox) // 获取dom元素  beforeCreate undefined
        },
        created() {
            // 创建之后 能获取data数据，但是获取不到dom元素
            console.log('created', this.num) // 获取data  created 10
            console.log('created', this.$refs.divbox) // 获取dom元素  created undefined
        },
        beforeMount(){
            // 挂载前
            console.log('beforeMount', this.num) // 获取data  beforeMount 10
            console.log('beforeMount', this.$refs.divbox) // 获取dom元素  beforeMount undefined
        },
        mounted(){
            // 挂载后
            console.log('mounted', this.num) // 获取data  mounted 10
            console.log('mounted', this.$refs.divbox) // 获取dom元素  mounted <div data-v-283afe90>​我是一个div​</div>​
        },
        // 我在上面定义了一个button按钮并且定义了一个点击事件 add，每当执行这个事件就会触发 beforeUpdate 更新前、updated更新后这两个生命周期，这里要注意：在vue2中只有在视图更新时才会触发，只更改数据是不会触发这两个生命周期的
        beforeUpdate(){
            console.log('更新前');
        },
        updated(){
            console.log('更新后');
        },
        // 这里由于展示有限就不给大家展示路由的配置了，不过我还是给大家展示了一个按钮 ‘去info页面’ 其实 beforeDestory 销毁前、 destoryed销毁后、其实这两个生命周期就是在组件之间进行切换时触发的；
        beforeDestroy(){
            console.log('list---beforeDestroy');
        },
        destroyed(){
            console.log('list---beforeDestroy');
        }
    }
</script>

<style scoped>

</style>