学习笔记(14):Vue2.x从入门到实战-Vue的生命周期（钩子函数）

立即学习:https://edu.csdn.net/course/play/6823/135324?utm_source=blogtoedu

生命周期（钩子函数）

<div id="app">
    {{count}}
    <p><button @click="add">add</button></p>
</div>
<p><button οnclick="app.$destroy()">销毁</button></p>

var app=new Vue({
        el:'#app',
        data:{
            count:1
        },
        methods:{
            add:function () {
                this.count++;
            }
        },
        beforeCreate:function(){
            console.log('1-beforeCreate 初始化之前');
        },
        created:function(){
            console.log('2-created 创建完成');
        },
        beforeMount:function(){
            console.log('3-beforeMount 挂载之前');
        },
        mounted:function(){
            console.log('4-mounted 被创建后');
        },
        beforeUpdate:function(){
            console.log('5-beforeUpdate 数据更新前');
        },
        updated:function(){
            console.log('6-updated 数据更新后');
        },
        activated:function(){
            console.log('7-activated');
        },
        deactivated:function(){
            console.log('8-deactivated');
        },
        beforeDestroy:function(){
            console.log('9-beforeDestroy 销毁之前');
        },
        destroyed:function(){
            console.log('10-destroyed 销毁之后')
        }
    })

新手一枚，若有不足，请指正！