vue 对象的生命周期

Posted 2021-03-23 eliwen

<div id="app">
    <p>{{num}}</p>
</div>

<script>
    var vm = new Vue({
        el:"#app",
        data:{
            num: 10,
        },
        beforeCreate(){
            // vm对象创建执行的方法
            console.log("vm对象创建之前");
            console.log( this.$el);
            console.log( this.$num);
        },
        created(){
            // vm 对象创建以后执行的方法
            console.log("vm对象创建之后");
            console.log( this.$el);  //此时vm 对象还没用初始化完成，所以没有把data挂在标签指令中
            console.log( this.$num);
        },
        beforeMount(){
            // vm 对象创建以后，挂载数据之前
             console.log("vm对象创建以后，执行指令之前");
             console.log( this.$el);
        },
        mounted(){
            //  vm 对象挂载数据之后
            console.log("vm对象创建之前");
            console.log( this.$el);
        }
        // 上面四个都是在创建vm 的时候进行初始化过程中自动调用的
        // 工作中，会在created或者mounted里面编写ajax 代码去服务器端获取数据
        // 如果这些数据不能涉及到修改html代码的，则Ajax写在created里面
        // 理论上来说，ajax代码提取数据肯定是越早越好
    })

</script>