vue生命周期-父子组件

vue生命周期-父子组件

vue父子组件的生命周期

创建实例：从外到内（从父组件到子组件）

渲染：从内到外（子组件渲染完，再渲染父组件）

Vue.component('comp',{
  template:'<div>This is a component !</div>'
})
const app = new Vue({
  render:h => h(App)
})
app.$mount('#app')
// new Vue({el:'#app'})

创建（从外到内）到挂载（从内到外）阶段

• root beforeCreate
  • root created
    • root beforeMount
    • 这里root组件尝试进行挂载，在compile阶段，不管是原生标签div还是组件标签comp，是不会进行特殊处理的， compileToFuction函数返回一个render函数，这个render函数中是不会对组件标签进行特殊处理的。一直到moutComponent方法中更新函数updateComponent = () => {vm._update(vm._render(),hydrating)}被调用，render函数执行的时候，会生成vnode，在这里进行判断：原始标签 还是 组件标签。如果发现不是原始标签，即使组件标签：
    • comp beforeCreate
  • comp created
• comp beforeMount
• comp mounted
• root mounted

更新阶段

• root beforeUpdate
  • comp beforeUpdate
  • comp updated
• root updated

销毁阶段

• root beforeDestroy
  • comp beforeDestroy
  • comp destroyed
• root destroyed

Vue生命周期

​