HBC BLOG

主题

生命周期 ​

面试题：什么是生命周期 ​

INFO

vue 中每个组件都是独立的，每个组件都有一个属于它的生命周期， 从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。

vue2 生命周期 ​

js
1. 有哪些生命周期
系统自带：
  beforeCreate 组件创建之前
  created 组件创建之后
  beforeMount 组价挂载到页面之前执行
  mounted 组件挂载到页面之后执行
  beforeUpdate 组件更新之前
  updated 组件更新之后
  beforeDestroy 组件销毁之前
  destroyed 组件销毁后
  errorCaptured
2. 一旦进入到页面或者组件，会执行哪些生命周期，顺序。
  beforeCreate
  created
  beforeMount
  mounted
3. 在哪个阶段有$el，在哪个阶段有$data
	beforeCreate 啥也没有
	created  有data没有el
	beforeMount 有data没有el
	mounted 都有
4. 如果加入了keep-alive会多俩个生命周期
  activated、deactivated
5. 如果加入了keep-alive，第一次进入组件会执行哪些生命？
  beforeCreate
  created
  beforeMount
  mounted
  activated
6. 如果加入了keep-alive，第二次或者第N次进入组件会执行哪些生命周期？
只执行一个生命周期：activated

Vue的⽗组件和⼦组件⽣命周期钩⼦执⾏顺序是什么？ ​

js
渲染过程：
⽗组件挂载完成⼀定是等⼦组件都挂载完成后，才算是⽗组件挂载完，所以⽗组件的mounted在⼦组件mouted之后

⽗beforeCreate -> ⽗created -> ⽗beforeMount -> ⼦beforeCreate -> ⼦created -> ⼦beforeMount-> ⼦mounted -> ⽗mounted
js
⼦组件更新过程：
1. 影响到⽗组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
2. 不影响⽗组件： ⼦beforeUpdate -> ⼦updated
js
⽗组件更新过程：
1. 影响到⼦组件： ⽗beforeUpdate -> ⼦beforeUpdate->⼦updated -> ⽗updted
2. 不影响⼦组件： ⽗beforeUpdate -> ⽗updated
js
销毁过程：
⽗beforeDestroy -> ⼦beforeDestroy -> ⼦destroyed -> ⽗destroyed

INFO

看起来很多好像很难记忆，其实只要理解了，不管是哪种情况，都⼀定是⽗组件等待⼦组件完成后，才 会执⾏⾃⼰对应完成的钩⼦，就可以很容易记住

DOM 渲染在那个生命周期阶段内完成 ​

INFO

DOM 渲染在 mounted 周期中就已经完成