大家好，我是阿林。
在本系列文章中，将以提问和解答的方式，和大家一起熟练掌握vue开发，共同进步，欢迎留言区讨论～
问题
18.谈谈你对 Vue 生命周期的理解
什么是生命周期？
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。 -- Vue 文档
简单来说，就是 Vue 实例从创建到销毁的过程。
vue 所有生命周期
| 生命周期 | 作用 |
|---|---|
| beforeCreate | 在实例初始化之后,进行数据侦听和事件/侦听器的配置之前同步调用。 |
| created | 在实例创建完成后被立即同步调用。在这一步中，实例已完成对选项的处理，意味着以下内容已被配置完毕：数据侦听、计算属性、方法、事件/侦听器的回调函数。然而，挂载阶段还没开始，且 $el property 目前尚不可用。 |
| beforeMount | 在挂载开始之前被调用：相关的 render 函数首次被调用。 |
| mounted | 实例被挂载后调用，这时 el 被新创建的 vm.$el 替换了。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.$el 也在文档内。 |
| beforeUpdate | 在数据发生改变后，DOM 被更新之前被调用。这里适合在现有 DOM 将要被更新之前访问它，比如移除手动添加的事件监听器。 |
| updated | 在数据更改导致的虚拟 DOM 重新渲染和更新完毕之后被调用。当这个钩子被调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。然而在大多数情况下，你应该避免在此期间更改状态。如果要相应状态改变，通常最好使用computed或watch取而代之。 |
| activited | 被 keep-alive 缓存的组件激活时调用。 |
| deactivated | 被 keep-alive 缓存的组件失活时调用。 |
| beforeDestroy | 实例销毁之前调用。在这一步，实例仍然完全可用。 |
| destroyed | 实例销毁后调用。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。 |
| errorCaptured | 在捕获一个来自后代组件的错误时被调用。此钩子会收到三个参数：错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。 |
生命周期示意图
生命周期全览图
19.Vue 中 created 阶段可以访问或操作DOM吗？
不能，mounted 阶段才能。
不妨打个 log 看一下。
beforeCreate() {
console.log('beforeCreate :>> ', {
el: this.$el,
data: this.$data
})
},
created() {
console.log('created :>> ', {
el: this.$el,
data: this.$data
})
},
beforeMount() {
console.log('beforemount :>> ', {
el: this.$el,
data: this.$data
})
},
mounted() {
console.log('mounted :>> ', {
el: this.$el,
data: this.$data
})
},
很显然，created 阶段可以操作 data，mounted 阶段才能访问和操作DOM。
20.Vue 开发中，在哪个生命周期内调用异步请求
created、beforeMount、mounted 中都可以，。
根据 19 问的 log 图，data 在 created 阶段已经创建了，可以将服务端端返回的数据进行赋值。
建议在 created 阶段进行异步请求，因为可以更快获取到服务端数据，减少页面 loading 时间。
21.Vue 的父组件和子组件生命周期钩子函数执行顺序是怎样的？
我们在父子组件的每一个生命周期中都打上 log，来观察执行顺序。
父组件和子组件加载渲染过程
父 beforeCreate -> 父 created -> 父 beforeMount -> 子 beforeCreate -> 子 created -> 子 beforeMount -> 子 mounted -> 父 mounted
创建实例是从外到内的，挂载实例是从内到外的。
父子组件交互，子组件更新
父 beforeUpdate -> 子 beforeUpdate -> 子 updated -> 父 updated
父组件
<child :msg="msg" />
<button @click="changeMsg">changeMsg</button>
changeMsg() {
this.msg = '123'
}
子组件
<p>{{ msg }}</p>
父组件更新
父组件
<p>{{ msg }}</p>
<button @click="changeMsg">changeMsg</button>
changeMsg() {
this.msg = '123'
}
父 beforeUpdate -> 父 updated。
不会影响子组件。
子组件更新
子组件
<p>{{ msg }}</p>
<button @click="changeMsg">changeMsg</button>
changeMsg() {
this.msg = '123'
}
子 beforeUpdate -> 子 updated。
不会影响父组件。
父组件销毁
引入父组件的地方
<father v-if="showFather" />
<button @click="handleDestroy">销毁父组件</button>
handleDestroy() {
this.showFather = false
}
父 beforeDestroy -> 子 beforeDestroy -> 子 destroyed -> 父 destroyed
子组件销毁
父组件内
<child v-if="showChild" />
<button @click="handleDestroy">销毁子组件</button>
handleDestroy() {
this.showChild = false
}
子 beforeDestroy -> 子 destroyed。
不会影响父组件。
22.父组件可以监听到子组件的生命周期吗？
可以 emit事件来监听
子组件内
mounted() {
console.log('子 mounted :>> ')
this.$emit('mounted')
}
父组件内
<child @mounted="handleChildMounted" />
handleChildMounted() {
console.log('监听到子组件 mounted :>> ')
}
@hook来监听
子组件内
created() {
console.log('子 created :>> ')
}
父组件内
<child @hook:created="handleChildCreated" />
handleChildCreated() {
console.log('监听到子组件 created :>> ')
}
注意，@hook 其实就是一种简写形式，其本质还是 emit 事件，在 vue 源码的lifecycle.js 里可以找到
参考资料
