vue生命周期

vue生命周期

vue实例从创建到销毁的过程，称为生命周期，总有八个阶段，对应八个钩子函数

<div class='box'>
    <ul>
        <li>{{msg}}</li>
        <li><button @click="updata()">更新数据触发生命周期 钩子函数</button></li>
        <li><button @click="destray()">销毁数据触发生命周期 钩子函数</button></li>
    </ul>
</div>

<script src='__STATIC__/vendor/vue/vue.min.js'></script>
<script>
    var app = new Vue({
        el: '.box',
        data: {
            msg:'数据',
        },
        methods:{
            updata(){
                this.msg = "进行数据更新";
            },
            destray(){
                //完全销毁一个实例。清理它与其它实例的连接，解绑它的全部指令及事件监听器。
                app.$destroy();
            }
        },
        beforeCreate(){
            alert('组件实例刚刚创建，还未进行数据观测和事件配置');
        },
        //常用的钩子函数
        created(){
            alert('实例已经创建完成，并且已经进行数据观测和事件配置，加载页面时发送ajax');
        },
        beforeMount(){
            alert('模板编译之前，还没挂载');
        },
        //常用的钩子函数
        mounted(){
            alert('模板编译自后，已经挂载，此时才会渲染页面，才能看到页面上数据的展示');
        },
        beforeUpdate(){
            alert('组件更新之前');
        },
        updated(){
            alert('组件更新之后');
        },
        beforeDestroy(){
            alert('组件销毁之前');
        },
        destroyed(){
            alert('组件销毁之后');
        }
    })
</script>

上一篇：vue-resource发送jsonp跨域请求

下一篇：vue计算属性