? 首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：
?
? 可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:
? vue生命周期分为 初始化,运行中,销毁 一共8个钩子函数
? 解析:
? 1.在组件创建前触发,目的是为了组件的生命周期 和 组件的事件做准备
? 2.数据没有获取到，真实dom也没有渲染出来
? 3.项目而言没有太大的用处，可以在这一步进行数据请求（可以修改数据） 4.执行一次
<body>
<div id="app">
<Hello></Hello>
</div>
<template id="hello">
<div>
<p> {{ msg }} </p>
</div>
</template>
</body>
//beforeCreate()钩子函数 表示在组件创建之前触发（意思就是还没有这个组件，所以并不会获取到数据）
Vue.component('Hello', {
template: '#hello',
data() {
return {
msg: 'hello 相亲了'
}
},
beforeCreate() {
console.log('1-beforeCreate')
console.log('data', this.msg) //并没有输出数据
console.log('真实dom', document.querySelector('p') //并没有输出真实的dom
},? 解析:
? 1.组件创建结束
? 2.数据得到了，真实dom没有渲染出来
? 3.可以进行数据请求，提供一次数据修改的机会
? 4.执行了一次
Vue.component('Hello', {
template: '#hello',
data() {
return {
msg: 'hello 相亲了'
}
},
created() {
console.log('2-created')
console.log('data', this.msg) //data,hello 相亲了
console.log('真实dom', document.querySelector('p')) //无法获取
},
}? 解析：
? 1.组件挂载前
? 2.任务:判断el 判断template
? 2.1如果没有el： 解析不往下执行，需要我们手动挂载
? 2.2如果有el：那么会判断是否有template，有template，就会进行render函数
? 2.3如果没有template：通过outerHTML 手动书写模板
? 3.数据可以获取到，但是真实数据还没有渲染（因为beforeMount这一步 render函数还没有生效，也就是说，此时还是虚拟的dom ）
? 4.可以进行数据请求，也可以数据修改
? 5.执行一次
解析：outerHTML
<body>
<div class="box"></div>
</body>
<script>
var box = document.querySelector('.box')
// box.innerHTML = 'Gabriel Yan'
box.outerHTML = 'Gabriel Yan'
</script>
注意：outHTML会干掉外部标签beforeMount
beforeMount() {
console.log('3-beforeMount')
console.log('data', this.msg)
console.log('真实dom', document.querySelector('p'))
},//Vue内部render函数 用来解析jsx转换成虚拟dom对象模型
? 1.组件 挂载结束
? 2.数据获得了 ， 真实dom也获得了
? 3.也可以进行数据请求，数据修改
? 4.执行了一次
? 5.可以进行真实dom的操作（可以进行第三方库的实例化）
mounted() {
console.log('4-mounted')
console.log('data', this.msg)
console.log('真实dom', document.querySelector('p'))
}综上总结：
? 1.数据请求一般写在created里面
? 2.第三方库实例化一般在mounted中写
触发条件: 数据更新(数据修改的时候才会触发)
? 解析：
? 1.更新前
? 2.重新渲染vdom(虚拟dom)，然后通过diff算法比较两次vdom，生成patch 补丁对象
? 3.这个钩子函数更多的是进行内部操作，一般我们不干预
? 4.只要数据改变就会被触发（触发多次）
beforeUpdate () {
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
},? 解析：
? 1.更新结束
? 2.真实dom得到了,数据也得到了（更新后的）
? 3.动态数据获取（第三方库实例化）
updated () {
console.log('updated')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
}? 解析：
? 1.Vue的销毁有两种形式
? 1.1通过开关的形式
? 1.2通过调用$destroy 方法
? 1.3两种方式的对比：
? 外部销毁不仅能销毁组件,也能销毁该组件的dom结构
? 内部销毁只能销毁组件,不能销毁组件的dom结构
? 2.触发条件:当组件销毁时触发
? 3.使用:用来善后，比如第三方实例的删除 ， 关闭计时器等
?
通过 开关的形式
beforeDestroy () {
console.log('beforeDestroy') //组件被销毁时候才会触发
},
destroyed () {
console.log('destroyed')
}? 1.解析: 和beforeDestroy的功能都是一样的没什么区别
? （vue的生命周期是模仿react的 react已经将销毁的两个生命周期合并成一个）
原文：https://www.cnblogs.com/xiaohanga/p/11096039.html