vue生命周期

beforeCreate => 组件实例刚刚被创建，属性和方法都没有；
create => 属性和方法已经绑定成功，但DOM还没有生成；
beforeMount => 模板编译之前；
mounted => 模板已经编译完成，类似之前的ready,就是模板引擎数据有没有展示；有用
beforeUpdate => 组件（数据）更新之前，用于监测实例内的变化；有用
updated => 组件更新完毕;
beforeDestroy => 组件销毁之前;
destroyed => 组件销毁之后;
 
<body>
    <div id="app">
        <input type="button" value="更新数据" @click="update" />
        <input type="button" value="销毁组件" @click="destroy" />
        {{ msg }}
    </div>
</body>
<script src="vue.js"></script>
<script type="text/javascript">
    var vm = new Vue({
        el: '#app',
        data:{
            msg: 'Vue2.x 生命周期'
        },
        methods: {
            update(){
                this.msg = '点击了数据更新吧'
            },
            destroy(){
                this.$destroy();//销毁组件
            }
        },
        beforeCreate() {
            console.log('vue刚刚被创建');//还没有属性和方法
        },
        created() {
            console.log('vue实例已经创建完成');//属性和方法已经绑定成功，DOM还没有生成
        },
        beforeMount() {
            console.log('模板编译之前');
        },
        mounted() {
            console.log('模板已经编译完成');//类似之前的ready,就是模板引擎数据有没有展示
        },
        beforeUpdate() {
            console.log('组件更新之前');
        },
        updated() {
            console.log('组件更新完毕');
        },
        beforeDestroy() {
            console.log('组件销毁之前');
        },
        destroyed() {
            console.log('组件销毁之后');//组件销毁之后，更新数据就无效了
        }
    });
</script>

 

页面效果如图：

 

posted @ 2018-10-08 14:46  ZQ是水鱼  阅读(187)  评论(0)    收藏  举报