vue生命周期

vue生命周期

beforeCreate

在这个钩子函数里只是刚开始初始化实例，拿不到实例里的任何东西，比如data和methods和事件监听等。

data: {
   
    msg: 'Ethel'
},
methods: {
   
	getLists(){
   
		return 'beauty'
	}
},
beforeCreate() {
   
	console.log('beforeCreate',this.msg,this.getLists())
}

运行结果会报错

created

在实例创建完成后立即调用。此时，实例已经完成以下配置：数据观测（data observer），属性和方法的运算，watch/evevt事件回调。但挂载阶段还没开始，$el属性目前不客观。
这是最早能拿到实例里面的数据和方法的一个钩子函数。应用场景：异步数据的获取和对实例数据的初始化操作都在这里面进行。

data: {
   
    msg: 'Ethel',
	imgs: null
},
methods: {
   
    getLists(){
   
		this.$http.get(url).then(res=>{
   
        this.imgs = res.data.lists
        console.log(this.imgs)
		})
	}
},
created() {
   
    this.getLists()
}

beforeMount

在初始挂载开始前被调用：相关的render函数首次被调用。
不管是created还是beforeMount在它们里面都拿不到真实dom元素，如果我们需要拿到dom元素就需要在mounted里面操作。

<div id="app">
	<ul>
        <li v-for="(item,index) in arr" :key="index">{
   {
   item}}</li>
	</ul>
</div>
<script>
let app = new Vue({
   
	data: {
   
    	arr: [1,2,3]
	},