创建期间生命周期函数
如图 3-1 的流程图所示，new Vue() 表示创建 Vue 实例，init 表示实例初始化，在实例初始化的过程中，遇到第一个生命周期函数 beforeCreate，它属于创建期间生命周期函数。对于 beforeCreate 生命周期函数，要注意以下两个问题。
-
周期函数在哪定义。
-
在 beforeCreate 中，是否可以使用 data 中的数据和 methods 中的方法。
生命周期函数定义的位置与 data 属性、methods 属性平级，代码如下。
console.log(this.msg) //undefined
this.show() //报错代码解析如下。
-
生命周期函数不需要手动调用，在创建 Vue 实例的过程中会自动调用，所以 beforeCreate 函数会自动执行。
-
在生命周期函数中，调用 data 中的数据和 methods 中的方法，同样要使用 this。
控制台运行结果如图 3-2 所示。
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
},
methods: {
show() {
console.log('你好');
}
},
beforeCreate() {
console.log(this.msg); // undefined
this.show(); // 报错
}
});
</script>根据上述运行结果，对于 beforeCreate 生命周期函数，可以得出以下结论。
beforeCreate 在 Vue 实例创建之前，data 中的数据和 methods 中的方法并没有初始化，所以它不能被调用。
沿着流程图继续往下走，遇到创建期间的第二个生命周期函数 created。下面来看看在 created 中能否调用 data 中的数据和 methods 中的方法，代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
},
methods: {
show() {
console.log('你好');
}
},
created() {
console.log(this.msg); // Hello World
this.show(); // 你好
}
});
</script>控制台运行结果如图 3-3 所示。
根据上述运行结果，可以得出以下结论。
-
在 created 生命周期函数中，data 中的数据和 methods 中的方法已经被初始化完成，可以在页面中调用。
-
因为可以操作 data 中的数据和 methods 中的方法，后期一般是在 created 生命周期函数中发送 Ajax 请求。
流程图中，接下来是判断实例中有没有 el 属性和 template 属性，我们要根据这两个属性挂载数据。
截至目前我们只学习了 el 属性，template 属性是在组件中讲解的，所以流程图中，我们先讲解有 el 属性的分支，最后再把 template 属性的结论告诉大家。
beforeMount 是创建期间的第三个生命周期函数，从这个生命周期函数开始，Vue 开始编译模板、渲染数据，要把 data 中的数据渲染到视图层的 HTML 页面上。
我们使用原生 JS 看看是否能获取到数据，代码如下。
视图层代码如下。
<div id="app" v-cloak>
<h1 id="test">{{ msg }}</h1>
</div>M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
},
methods: {
show() {
console.log('你好');
}
},
beforeMount() {
console.log(document.getElementById('test').innerText); // {{ msg }}
}
});
</script>代码解析如下。
在视图层代码中给 h1 标签添加 id 属性，使用原生方法获取 h1 标签中的值，如下所示。
console.log(document.getElementById('test').innerText)运行结果如图 3-4 所示。
根据上述运行结果，可以得出以下结论。
在 beforeMount 生命周期函数中，Vue 开始编译模板、渲染数据，但数据只是在内存中渲染的，并没有真实挂载到 HTML 页面上，所以控制台打印的是 Vue 源码，而不是真实的数据。
沿着流程图继续往下看，创建期间的最后一个生命周期函数是 mounted，它表示数据渲染完成，真实挂载到页面中，代码如下。
视图层代码如下。
<div id="app" v-cloak>
<h1 id="test">{{ msg }}</h1>
</div>M 层代码如下。
<script>
var vm = new Vue({
el: '#app',
data: {
msg: 'Hello World'
},
methods: {
show() {
console.log('你好');
}
},
mounted() {
console.log(document.getElementById('test').innerText); // Hello World
}
});
</script>运行结果如图 3-5 所示。
根据上述运行结果，可以得出以下结论。
mounted 生命周期函数的打印结果是 “Hello World”，说明内存中的数据已经挂载到页面中，Vue 实例创建完成。