2. created钩子函数和beforeMount间的生命周期
这个阶段叫做模板编译阶段，这个阶段的目的是将模板编译为渲染函数，只存在于完整版中，如果只在包含运行时的构建版本中执行new Vue()，则不存在这个阶段。
这个阶段做的事情还是很多的，首先判断对象有没有el选项，如果有的话就绩效向下编译，如果没有el选项的话，则停止编译，也就意味着停止了生命周期，直到在该vue实例上调用vm.$mount(el)。
尝试一下：注释掉 el:’#app’
然后看到运行到created的时候就停止了！
然后我们后面在调用一下vm.$mount(el),再看一下结果看一下
vm.$mount('#app')ok,此时发现代码又往下执行啦！
template 参数选项堆生命周期的影响
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>生命周期02</title>
<script src="../../vue.js"></script>
</head>
<body>
<div id="app">
<h1>{{message+ "---这是在outer HTML中的"}}</h1>
</div>
</body>
<script type="text/javascript">
const vm = new Vue({
el:'#app',
template:"<h1>{{message+'---这是在template中的'}}</h1>",
// render:function(createElement){
// return createElement('h1','this is createElement');
// },
data:{
message:'Vue的生命周期'
}
})
</script>
</html>执行后结果为：
然后，我们将vue中的template的选项注释掉之后，再看一下
所以呀，这下就明白为什么el的判断要再template之前了吧，是因为vue需要通过el找到对应的outer template。
在vue的对象中呢，还有一个render函数，它是以createElement作为参数，然后做渲染操作。
render:function(createElement){
return createElement('h1','this is createElement');
},此时呢，页面中渲染的是：
因此他们之间的优先级为：render函数选项>template选项>outer HTML
3.beforeMount 和mounted 钩子函数间的生命周期
可以看到此时是给vue实例对象添加$el成员，并且替换掉挂载的DOM元素。因为在之前的console中打印的结果可以看到beforeMounted之前el上还是undefined
4.mounted
在mounted之前的h1中还是通过{{message}}进行占位的，因为此时还要挂载到页面上，还是js中的虚拟DOM形式存在的。在mounted之后可以看到h1的内容发生改变。
本文地址：百科问答频道 https://www.neebe.cn/wenda/903243_2.html，易企推百科一个免费的知识分享平台，本站部分文章来网络分享，本着互联网分享的精神，如有涉及到您的权益，请联系我们删除，谢谢！
相关阅读
