vue--生命周期钩子

今天来说说vue开发中一个重要的知识点，那就是生命周期钩子。在vue中有八大生命周期钩子，分别是beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroyed。在初期的开发中主要用到的就是created和mounted。今天主要应用一下created
一、created的应用：在实例创建完成后被立即调用。在这一步，实例已完成以下的配置，数据的观测、property、方法的运算，watch/event事件回调。然而挂载阶段还没开始，$el property 目前尚不可用。
实例代码:当水果没有加载出来的时候显示loading…，当水果列表加载出来的时候显示水果列表，loading消失

//实现水果列表的加载
<template>
	<div>
		<h1>水果列表<h1>
		<p v-if="loading">loading....</p>
		<ul v-if="!loading">
			<li v-for="(item,index) of fruits" :key="index">
				{{item}}
			<li>
		</ul>
	</div>
</template>
<script>
export default{
data(){
		return{
			fruits:[],
			loading:true
		}
},
created(){
	this.getData();
}
methods:{
	getData(){
		//通过计时器来模拟异步操作
			setTimeout( () =>{
			this.fruits = ["香蕉","苹果","鸭梨"];
			this.loading = false;  //当水果列表加载出来的时候loading隐藏
			},2000)
		}
	}
}
</script>