vue的一生

//第一阶段： 创建阶段(挂载组件data数据及内部事件初始化)

    // Vue挂载阶段： data数据和内部事件初始化
    beforeCreate(){
        console.log('创建阶段beforeCreate： 组件即将开始挂载数据')
    },
    //挂载当前组件的data数据，转get set
    //vue初始化内部事件
    created(){
        // 初始化ajax请求在此处发送！
        console.log('创建阶段created： 组件数据/事件挂载完毕')
    },

//第二阶段： 挂载阶段(翻译组件template，然后渲染到el容器节点中)

    //把template翻译为真实的html节点
    beforeMount(){
        console.log('挂载阶段beforeMount：组件template已翻译为html，可以开始渲染')
    },
    //把翻译完的html放入el容器节点中
    mounted(){
        this.timerid = setInterval(() => {
            console.log(1)
        }, 100)
        console.log('挂载阶段mounted：组件已经渲染完毕,可以开始获取节点并进行操作')
    },

//第三阶段：更新阶段（最长的一个生命周期阶段，等待用户交互，发生数据视图改变）

    beforeUpdate(){
        console.log('更新阶段beforeUpdate：data发生改变，可以开始更新')
    },
    //重新翻译template，再次进行节点更新
    updated(){
        console.log('更新阶段updated：页面节点更新完毕!')
    },

//第四阶段： 销毁阶段

    beforeDestroy(){
        console.log('销毁阶段beforeDestroy： 组件即将销毁')
    },
    //组件回收，释放内存
    destroyed(){
        //内存泄露： 在不知情情况下，有代码不停在消耗内存
        //此函数异常重要，需要在此函数回收所有我们自己创建的东西，释放内存！
        
        console.log('销毁阶段destroyed： 组件销毁完毕')
        clearInterval(this.timerid)
    }