Vue生命周期之beforeCreate

Vue生命周期之beforeCreate教程

Vue 生命周期 的 beforeCreate 函数就是 Vue 实例被创建出来之前，会执行它。在 beforeCreate 生命周期函数执行的时候，Vue实例中的 data 和 methods 中的数据都还没有被初始化。

案例

Vue生命周期之beforeCreate案例

<!DOCTYPE html>
<html>
<head>
	<title>Vue生命周期之beforeCreate</title>
	<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<body>
	<div id="app">
	</div>
    <p>嗨客网（www.haicoder.net）</p>
</body>
<script type="text/javascript">
	var vm = new Vue({
        el : '#app',
        data:{
        	msg: "ok"
        },
        methods:{
        	show(){
        		console.log('执行了show方法');
        	}
        },
        beforeCreate() {
            console.log('Call Vue beforeCreate');
        	console.log(this.msg);
        	this.show();
        }
    });
</script>
</html>

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

02 vue beforeCreate.png

我们在 Vue 生命周期函数的 beforeCreate 中，打印了 Vue 实例中的 data 数据，以及调用了 Vue 实例中的 methods 中的方法，都没有成功的输出。

说明此时 data 和 methods 中的数据都还没有被初始化。

Vue生命周期之beforeCreate总结

Vue 生命周期的 beforeCreate 函数就是 Vue 实例被创建出来之前，会执行它。在 beforeCreate 生命周期函数执行的时候，Vue 实例中的 data 和 methods 中的数据都还没有被初始化。