Vue生命周期
Vue生命周期
首先，每个Vue实例在被创建之前都要经过一系列的初始化过程,这个过程就是vue的生命周期。首先看一张图吧~这是官方文档上的图片相信大家一定都会很熟悉：
可以看到在vue一整个的生命周期中会有很多钩子函数提供给我们在vue生命周期不同的时刻进行操作, 那么先列出所有的钩子函数，然后我们再一一详解:
vue生命周期分为 初始化,运行中,销毁 一共8个钩子函数
- beforeCreate
- created
- beforeMount
- mounted
- beforeUpdate
- updated
- beforeDestroy
- destroyed
初始化
beforeCreate
解析:
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
},
created
解析:
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')) //无法获取
},
}
beforeMount
解析：
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对象模型
mounted
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中写
运行中
触发条件: 数据更新(数据修改的时候才会触发)
beforeUpdate
解析：
1.更新前
2.重新渲染vdom(虚拟dom)，然后通过diff算法比较两次vdom，生成patch 补丁对象
3.这个钩子函数更多的是进行内部操作，一般我们不干预
4.只要数据改变就会被触发（触发多次）
beforeUpdate () {
console.log('beforeUpdate')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
},
Update
解析：
1.更新结束
2.真实dom得到了,数据也得到了（更新后的）
3.动态数据获取（第三方库实例化）
updated () {
console.log('updated')
console.log('data',this.msg)
console.log('真实dom',document.querySelector('p'))
}
beforedestroy
解析：
1.Vue的销毁有两种形式
1.1通过开关的形式
1.2通过调用$destroy 方法
1.3两种方式的对比：
外部销毁不仅能销毁组件,也能销毁该组件的dom结构
内部销毁只能销毁组件,不能销毁组件的dom结构
2.触发条件:当组件销毁时触发
3.使用:用来善后，比如第三方实例的删除 ， 关闭计时器等
通过 开关的形式
beforeDestroy () {
console.log('beforeDestroy') //组件被销毁时候才会触发
},
destroyed () {
console.log('destroyed')
}
destroy
1.解析: 和beforeDestroy的功能都是一样的没什么区别
（vue的生命周期是模仿react的 react已经将销毁的两个生命周期合并成一个）
