Vue生命周期详解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_17347575/article/details/71195027

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
    <div id="demo"></div>
    <script src='https://cdn.bootcss.com/vue/2.3.2/vue.js'></script>
    <script>
        var vm = new Vue({
            el:'#demo',
            beforeCreate: function(){
                console.log("开始初始化时同步调用,此时数据观察,事件都没有初始化");
            },
            created:function(){
                console.log('已经完成实例的创建');
            },
            beforeMount:function(){
                console.log("在模版编译之前执行");
            },
            mount:function(){
                console.log("模版编译完成");
            },
            beforeDestroy:function(){
                console.log("开始销毁实例时调用,此用的实例依然有用");
            },
            destroyed:function(){
                console.log("实例已销毁");
            },
            updated:function(){
                console.log('如果你要更新数据,那么每次更新数据之后就会调用');
            },
            activated:function(){
                console.log("动态组件初始化渲染过程中调用,需要keep-live配合使用");
            },
            deactivated:function(){
                console.log("动态组件移出过程中调用,需要keep-live配合使用");
            }
        });

    </script>
</body>
</html>

Vue.js的生命周期