生命周期图:

Vue—生命周期_Vue

每个Vue实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。

同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。

<html>
<head>
    <!-- 开发环境版本,包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <!-- 生产环境版本,优化了尺寸和速度
    <script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
</head>
<body>
    <div id="app">

    </div>
</body>
</html>
<script>
    var vm = new Vue({
        el: '#app',
        data: {},
        methods:{
            //自定义方法
            fn:function(){
                //
            }
        },
        mounted:function(){
            debugger;
            //不同阶段添加自己的代码
        },
        created:function(){
            debugger;
            //不同阶段添加自己的代码
        },
        beforeMount:function(){
            debugger;
            //不同阶段添加自己的代码
        }
    })
</script>