生命周期先上图
什么是生命周期
Vue实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程，我们称这是Vue的生命周期。通俗说就是Vue实例从创建到销毁的过程，就是生命周期。
在Vue的整个生命周期中，它提供了一系列的事件，可以让我们在事件触发时注册js方法，可以让我们用自己注册的js方法控制整个大局，在这些事件响应方法中的this直接指向的是vue的实例。
再上图，对生命周期图的标注
特别值得注意的是created钩子函数和mounted钩子函数的区别
每个钩子函数都在啥时间触发
beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用。
created
实例已经创建完成之后被调用。在这一步，实例已完成以下的配置：数据观测(data observer)，属性和方法的运算， watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。
beforeUpdate
数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。 你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。
updated
由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态，因为这可能会导致更新无限循环。
该钩子在服务器端渲染期间不被调用。
beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。 该钩子在服务器端渲染期间不被调用。
实例
App.vue
<template>
<div id="app">
<h1>{{ msg }}</h1>
<!-- 3.在模板中使用 -->
<v-home></v-home>
<br>
</div>
</template>
<script>
/*
生命周期函数/钩子：
组件挂载、组件更新、组件销毁触发的一系列方法 这些 方法叫做生命周期函数
*/
//1.引入组件
import Home from './components/Home.vue';
export default {
name: 'app',
data () {
return {
msg: '我是一个根组件'
}
},
//2.挂载组件
components:{//前面的组件名称不能和html一样
'v-home':Home,
},
mounted(){
console.log("我是一个生命周期函数");
}
}
</script>
<style lang="scss">
</style>
Home.vue
<!-- 创建一个组件 -->
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div>
<v-header></v-header>
<hr>
<br>
<v-life v-if="flag"></v-life>
<br>
<button @click="flag=!flag">挂载以及卸载life</button>
</div>
</template>
<script>
//引入头部组件
import Header from './Header.vue';
import Life from './life.vue';
export default {
data() {
return {
msg:'我是一个首页组件!!!',
flag:true
}
},
methods:{
run(){
alert(this.msg);
}
},
components: {
'v-header':Header,
'v-life':Life,
}
}
</script>
<style scoped lang="scss">
/*css scoped 局部作用域 */
h2{
color:red,
}
</style>
Header.vue
<template>
<div>
<h2 class="header">头部组件</h2>
</div>
</template>
<script>
export default {
data() {
return {
msg:'我是一个头部组件',
}
},
components: {}
}
</script>
<style scoped lang="scss">
.header{
background: #3944e6;
color: red;
}
</style>
Life.vue
<template>
<!-- 所有的内容要被根节点包含起来 -->
<div id="life">
生命周期函数的演示 ---{{msg}}
<br>
<button @click="setMsg()">执行方法改变msg</button>
</div>
</template>
<script>
/*
生命周期函数/生命周期钩子：
组件挂载、以及组件更新、组件销毁、的时候触发的一系列的方法 这些方法就叫做生命周期函数
mounted和beforeDestroy比较重要
*/
export default{
data(){
return{
msg:'msg111'
}
},
methods:{
setMsg(){
this.msg="我是改变后的数据"
}
},
//从上到下有顺序要求
beforeCreate(){
console.log('实例刚刚被创建1');
},
created(){
console.log('实例已经创建完成2');
},
beforeMount(){
console.log('模板编译之前3');
},
mounted(){ /*请求数据，操作dom , 放在这个里面 mounted*/
console.log('模板编译完成4');
},
beforeUpdate(){
console.log('数据更新之前');
},
updated(){
console.log('数据更新完毕');
},
beforeDestroy(){ /*页面销毁的时候要保存一些数据，就可以监听这个销毁的生命周期函数*/
console.log('实例销毁之前');
},
destroyed(){
console.log('实例销毁完成');
}
}
</script>
运行截图：
点击 执行方法改变msg 按钮：
点击 挂载。。 按钮：
