Vue生命周期之beforeMount

Vue生命周期之beforeMount教程

Vue 生命周期 的 beforeMount 函数被调用时，这里表示 Vue 实例开始编辑模板，把 Vue 代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终字符串，然后，把这个模板字符串，渲染为内存中的 dom。

Vue 生命周期的 beforeMount 函数被调用时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。

案例

Vue生命周期之beforeMount案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue生命周期之beforeMount</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
		<h3 id="h3">{{msg}}</h3>
        <p>嗨客网（www.haicoder.net）</p>
	</div>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "ok"
        },
        beforeMount(){ 
        	console.log(document.getElementById("h3").innerText);
        }
    });
</script>
</html>

浏览器运行，页面显示如下图所示：

04 vue beforeMounted.png

我们在 Vue 生命周期函数的 beforeMount 中，打印 Vue 实例中的 data 属性中的值，我们发现此时值并没有被解析为我们定义的变量，而是原样的模板字符串。

说明此时只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。

Vue生命周期之beforeMount总结

Vue 生命周期的 beforeMount 函数被调用时，这里表示 Vue 实例开始编辑模板，把 Vue 代码中的那些指令进行执行，最终，在内存中生成一个编译好的最终字符串，然后，把这个模板字符串，渲染为内存中的 dom。

Vue 生命周期的 beforeMount 函数被调用时，只是在内存中，渲染好了模板，并没有把模板挂载到真正的页面中去。