vue关键钩子created、mounted、beforeMount间的生命周期

1. el参数对生命周期的影响

① 先判断是否有el项，如果没有执行到created后停止编译，

<div id="app">
   <h1>{{message}} 我是在默认HTML中</h1>
</div>
<script>
var vm = new Vue({
    data() {
        return {
            message: 'hello vue'
        };
    },
    beforeCreate() {
        console.group('beforeCreate');
        console.log('el: ', this.$el);
    },
    created() {
        console.group('created');
        console.log('el: ', this.$el);
    },
    beforeMount() {
        console.group('beforeMount');
        console.log('el: ', this.$el);
    },
    mounted() {
        console.group('mounted');
        console.log('el: ', this.$el);
    }
});
</script>

② 直到在该vue实例上调用vm.$mount(el)才会继续编译

2. template参数对生命周期的影响

① 如果没有template选项，el则将默认HTML作为模板编译

<div id="app">
   <h1>{{message}} 我是在默认HTML中</h1>
</div>
<script>
var vm = new Vue({
    el: '#app',
    data() {
        return {
            message: 'hello vue'
        };
    },
    beforeCreate() {
        console.group('beforeCreate');
        console.log('el: ', this.$el);
    },
    created() {
        console.group('created');
        console.log('el: ', this.$el);
    },
    beforeMount() {
        console.group('beforeMount');
        console.log('el: ', this.$el);
    },
    mounted() {
        console.group('mounted');
        console.log('el: ', this.$el);
    }
});
</script>

② 如果有template参数选项，则将其作为模板编译成render函数。

<div id="app">
   <h1>{{message}} 我是在默认HTML中</h1>
</div>
<script>
var vm = new Vue({
    el: '#app',
    template: '<h1>{{message}} 我是在template中</h1>',
    data() {
        return {
            message: 'hello vue'
        };
    },
    beforeCreate() {
        console.group('beforeCreate');
        console.log('el: ', this.$el);
    },
    created() {
        console.group('created');
        console.log('el: ', this.$el);
    },
    beforeMount() {
        console.group('beforeMount');
        console.log('el: ', this.$el);
    },
    mounted() {
        console.group('mounted');
        console.log('el: ', this.$el);
    }
});
</script>

③ 如果同时存在template和render参数选项，则优先使用render渲染。

<div id="app">
   <h1>{{message}} 我是在默认HTML中</h1>
</div>
<script>
var vm = new Vue({
    el: '#app',
    template: '<h1>{{message}} 我是在template中</h1>',
    data() {
        return {
            message: 'hello vue'
        };
    },
    beforeCreate() {
        console.group('beforeCreate');
        console.log('el: ', this.$el);
    },
    created() {
        console.group('created');
        console.log('el: ', this.$el);
    },
    beforeMount() {
        console.group('beforeMount');
        console.log('el: ', this.$el);
    },
    mounted() {
        console.group('mounted');
        console.log('el: ', this.$el);
    }
});
</script>

综合排名优先级：render函数选项 > template选项 > outer HTML.

参考资料：https://segmentfault.com/a/1190000011381906?utm_source=tag-newest