vue生命周期详解

一、vue的生命周期

创建前：beforeCreate, 创建后:created

挂载前：beforeMount, 挂载后：mounted

更新前：beforeUpdate, 更新后：updated

销毁前：beforeDestroy, 销毁后：destroyed

DOM渲染在哪个周期中就已经完成 ： mounted

-----使用了 keep-alive 就会多2个生命周期：
activated
deactivated

二、生命周期的理解

总共分为：8个阶段

1. 创建前/后：

• beforeCreate ：在实例初始化之后，数据观测 (data observer) 和 event/watcher事件配置之前被调用。vue实例的挂载元素$el和数据对象data都为undefined，还未初始化。

• created ： vue实例的数据对象data有了，但是$el还是没有。data，computed都执行了。属性已经赋值，但没有动态创建template属性对应的HTML元素，所以，此时如果更改数据不会触发updated函数。
  如果数据的初始值就来自于后端，可以发送ajax，或者fetch请求获取数据。

2. 载入前/后

• beforeMount : vue实例的$el和data都初始化了,但还是挂载之前为虚拟dom节点，数据还没有挂载到页面上。即此时页面中的{{}}里的变量还没有被数据替换。
• mounted : vue实例挂载完成，数据挂载完毕。一般来说，我们在此处发送异步请求（ajax，fetch，axios等），获取服务器上的数据，显示在DOM里。

3. 更新前/后

   当data变化时，会触发：beforeUpdate、updated。注意：此数据一定是在模板上出现的数据，否则，不会，也没有必要触发组件更新（因为数据不出现在模板里，就没有必要再次渲染）

4. 销毁前/后

   当销毁的时候，会触发： beforeDestroy、destroyed

示例代码

<template>
  <div id="app">
  		{{msg}}
  		<button @click='updateMsg'>修改</button>

  		<hr />

  		<Home v-if='flag'></Home>
  		<button @click='isHome'>切换</button>

  </div>
</template>

<script>
import Home from '@/components/Home'
export default {
  name: 'App',
  data () {
  	return {
  		msg:"这是数据",
  		flag:false
  	}
  },
  components:{
  	Home
  },
  beforeCreate(){
  	console.log(this.$el,'创建前');//undefined
  	console.log(this.msg,'创建前');//undefined
  },
  created(){
  	console.log(this.$el,'创建后');//undefined
  	console.log(this.msg,'创建后');//有了
  },
  beforeMount(){
  	console.log(this.$el,'挂载前');//undefined
  	console.log(this.msg,'挂载前');//有了
  },
  mounted(){
  	console.log(this.$el,'挂载后');//有了
  	console.log(this.msg,'挂载后');//有了
  },
  beforeUpdate(){
  	console.log("修改前");
  },
  updated(){
  	console.log("修改后");
  },
  methods:{
  	updateMsg(){
  		this.msg = '1111111';
  	},
  	isHome(){
  		this.flag = !this.flag;
  	}
  }
}
</script>