不多Bb先来看官网生命周期图示
假如觉得上图很复杂 来看这张简单的
这就是生命周期的8个阶段 其中用的最多的就是created（成功创建）阶段了，比如很多小伙伴喜欢在这里进行Ajax请求。
下面我们11来看实例中的钩子 上代码
1.beforeCreate
在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
beforeCreate(){
console.log('创建之前');
console.log(this.$el); //undefined
console.log(this.$data) //undefined
},
})
看结果：
vue对象实例，同时也没有挂载对象
2.create
在实例创建完成后被立即调用。在这一步，实例已完成以下的配置：数据观测 (data observer)，属性和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
created() {
console.log('成功创建');
console.log(this.$el); //undefined
console.log(this.$data) // 初始化完成
}
})
数据已经绑定到了对象实例，但是还没有挂载对象
3.beforeMount
在挂载开始之前被调用：相关的 render 函数首次被调用。
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
beforeMount() {
console.log('即将挂载');
console.log(this.$el); //挂载完成
console.log(this.$data) // 初始化完成
}
})
看结果：
$el属性，$el属性是一个HTMLElement对象，也就是这个阶段，vue实例通过原生的createElement等方法来创建这个html片段，准备注入到我们vue实例指明的el属性所对应的挂载点
4.mounted
el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。如果 root 实例挂载了一个文档内元素，当mounted被调用时vm.$el 也在文档内。
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
mounted() {
console.log('成功挂载');
console.log(this.$el);
console.log(this.$data)
}
})
看结果：
$el的内容挂载到了el，相当于我们在jquery执行了$(el).html($el),生成页面上真正的dom，上面我们就会发现dom的元素和我们$el的元素是一致的。在此之后，我们能够用方法来获取到el元素下的dom对象，并进 行各种操作
5.beforeUpdate
数据更新时调用，发生在虚拟 DOM 打补丁之前。这里适合在更新之前访问现有的 DOM，比如手动移除已添加的事件监听器。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="数据更新" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
beforeUpdate() {
console.log(this.name)
console.log(document.getElementById('box').innerHTML)
},
methods:{
beforeUpdate(){
this.name = '数据更新'
}
},
})
</script>
看结果：
数据更新到
dom之前，我们可以看到$el对象已经修改，但是我们页面上dom的数据还没有发生改变
6.updated
由于数据更改导致的虚拟DOM重新渲染和打补丁，在这之后会调用该钩子。
当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用计算属性或 watcher取而代之。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="数据更新" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
updated() {
console.log(this.name)
console.log(document.getElementById('box').innerHTML)
},
methods:{
beforeUpdate(){
this.name = '数据更新'
}
},
})
</script>
看结果：
dom结构会通过虚拟dom的原则，找到需要更新页面dom结构的最小路径，将改变更新到dom上面，完成更新
7.beforeDestroy
实例销毁之前调用。在这一步，实例仍然完全可用。
8.destroyed
Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
<div id="app">
<div id="box">{{ name }}</div>
<input type="button" value="销毁实例" @click="beforeUpdate">
</div>
<script>
var vm = new Vue({
el:'#app',
data:{
name:'凯GG'
},
beforeDestroy() {
console.log(this.$el)
console.log(this.$data)
},
destroyed() {
console.log(this.$el)
console.log(this.$data)
},
methods:{
beforeUpdate(){
vm.$destroy()
}
},
})
</script>
看结果：
