02Vue2.0+生命周期

Vue生命周期是Vue对象从无到有再到无的一个过程，我们又是不仅要明白一个对象的使用，

同时也要知道一个对象怎么创建了，就比如Spring的生命周期，往往不只是面试官的考点，

同时在项目中也也可能常常用到。

一共有：

beforeCreate:此时只是创建了Vue对象，但是并没有对数据进行检测
created：开始监控Data对象变化，并初始化事件
beforeMount：编译模板，把data里面的数据和模板生成html
mounted：替代掉el表达中的内容，选择加载相应dom
beforeUpdate：监视数据发生变化，注意第一次加载dom并不会发生
updated：实时更新数据，此发生发生在更新el之前
beforeDestroy：子组件发生变化或者调用了$destroy()方法，

　　　　比如路由发生变化，重新加载了组件，这时组件也就注销了

destroyed:实例销毁了，在新组件加载之前

下面是一个测试程

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Vue2.0生命周期</title>
    <script type="text/javascript" src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    
</head>
<body>
    <div id="box">
    <input type="text" v-model="msg"><br>
    <input type="button" value="销毁" @click="destroy">
    我是输入信息==>{{msg}}
    <ul >测试销毁
        <li>1点击销毁程序</li>
        <li>2.再去输入框输入，会发现输入并没有发生改变</li>
    </ul>
    
</body>
<script type="text/javascript">
    new Vue({
        el:"#box",
        data:{
            msg:"hello"
        },
        methods:{
            destroy:function(){
                console.log(this);
                this.$destroy();
            }
        },
        beforeCreate:function(){
                alert("创建之前");
        },
        created:function(){
                alert("创建之后");
        },
        beforeMount:function(){
            alert("挂载之前");
        },
        mounted:function(){
            alert("挂载之后");
        },
        beforeUpdate:function(){
            alert("更新之前");
        },
        updated:function(){
            alert("更新之后");
        },
        beforeDestroy:function(){
            alert("销毁之前");
        },
        destroyed:function(){
            alert("销毁了");
        }

    })    
    </script>
</html>

View Code