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>

页面效果如图：

相关阅读:
MySQL：逻辑库与表管理
MySQL：初识数据库
MySQL：安装与配置
C语言之指针
C语言之二维数组
C语言之冒泡排序
C语言之数组
C语言之函数的声明
C语言之带有返回值的函数
C语言之全局变量和局部变量

原文地址：https://www.cnblogs.com/wuzhiquan/p/9754271.html