vue的生命周期基础知识点

<!--
    四种类型生命周期
    八小类生命周期都有一个对应的函数，
    这些函数称为钩子函数
    1.创建 create
        1.1创建前 beforeCreate
        1.2创建后 created
    2.挂载 mount
        2.1挂载前 beforeMount
        2.2挂载后 mounted
    3.更新 update
        3.1更新前 beforeUpdate
        3.2更新后 updated
    4.销毁 destroy
        4.1销毁前 beforedestroy
        4.2销毁后 destroyed

    用的最多的两个生命周期
            created 和 mounted
-->

<div id="app">
    {{index}}
    <button  @click="change()">按钮</button>
    <button  @click="over()">点我自我销毁</button>
</div>
<!-- 引入vue文件 -->
<script src="vue.js"></script>
<script>
    let vm = new Vue({
        el:"#app",
        data:{
             index:0,
             list:[]
        },
        beforeCreate(){
            //Vue 创建前还不能用this访问data以及实例里面的任何函数；
            console.log(this.index)
            //debugger
        },
        created(){
            //Vue实例创建后，第一个能够访问到data数据以及methods函数的钩子，
            //页面上还没有更新视图
            console.log(this.index)
            //debugger
        }，
        beforeMount(){
             //Vue实例Dom挂载前，视图仍然没有更新
             //debugger
        },
        mounted(){
             //vue实例Dom挂载成功，数据已经在视图上更新
             // debugger
        },
        beforeUpdate(){
             //data里面的数据每次更新都会触发这个钩子，这个时候data的数据已经更新好了，
             //准备就绪，还没有更新到视图上
             console.log(this.index)
             //debugger
        },
        updated(){
            //data里面的数据更新完成，并且渲染到到视图上
            //debugger
        },
        beforeDestroy(){
            //销毁前，还能够改变data里面的数据和methods里面的方法
            //debugger
        },
        destroyed(){
            //销毁后，data里面的数据不在可用，methods里面的函数，也不能被调用；
            //但是页面上会保留，最后一次的更新的视图，但是里面的操作，均不可用
            //debugger
        }，
        methods：{
            change(){
                this.index++
            },
            over(){
                //主动销毁生命周期
                vm.$destroy
            }
        }
})
</script>