1、单个组件的生命周期
挂载阶段
beforeCreate
create
beforeMount
mounted
更新阶段
beforeUpdate
updated
卸载阶段
beforeDestroy
destroyed
2、做试验的文件一览
src
|----index.js //入口文件 执行new Vue，持载应用的根节点
|----App.vue // App应用的入口，应用根节点
|----Page.vue // 页面级级件
|----List.vue // 列表组件，页面里的列表
3、首次渲染控制台输出结果
============= beforeCreate ============
this.$el: undefined
this.$data: undefined
this.message: undefined
============= created ============
this.$el: undefined
this.$data: [object Object]
this.message: 生命周期
============= beforeMount ============
this.$el: [object HTMLDivElement]
<div id="app"></div>
this.$data: [object Object]
this.message: 生命周期
============= render ============
============= App组件beforeCreate ============
this.$el: undefined
this.$data: undefined
this.message: undefined
============= App组件created ============
this.$el: undefined
this.$data: [object Object]
this.message: App msg
============= App组件beforeMount ============
this.$el: undefined
undefined
this.$data: [object Object]
this.message: App msg
============= Page组件beforeCreate ============
this.$el: undefined
this.$data: undefined
this.message: undefined
============= Page组件created ============
this.$el: undefined
this.$data: [object Object]
this.message: page msg
============= Page组件beforeMount ============
this.$el: undefined
undefined
this.$data: [object Object]
this.message: page msg
============= List组件beforeCreate ============
this.$el: undefined
this.$data: undefined
this.message: undefined
============= List组件created ============
this.$el: undefined
this.$data: [object Object]
this.message: list msg
============= List组件beforeMount ============
this.$el: undefined
undefined
this.$data: [object Object]
this.message: list msg
============= List组件mounted ============
this.$el: [object HTMLDivElement]
<div id="list">列表list msg</div>
this.$data: [object Object]
this.message: list msg
============= Page组件mounted ============
this.$el: [object HTMLDivElement]
<div id="page">…</div>
this.$data: [object Object]
this.message: page msg
============= App组件mounted ============
this.$el: [object HTMLDivElement]
<div id="container">…</div>
this.$data: [object Object]
this.message: App msg
============= mounted ============
this.$el: [object HTMLDivElement]
<div id="container">…</div>
this.$data: [object Object]
this.message: 生命周期
3、更新Page、List
============= App组件beforeUpdate ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: App msg
============= Page组件beforeUpdate ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: page msg
============= List组件beforeUpdate ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: list msg
============= List组件updated ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: list msg
============= Page组件updated ============
this.$data: [object Object]
this.message: page msg
============= App组件updated ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: App msg
4、销毁Page、List
============= App组件beforeUpdate ============
$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: App msg
============= Page组件beforeDestroy ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: page msg
============= List组件beforeDestroy ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: list msg
============= List组件destroyed ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: list msg
============= Page组件destroyed ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: page msg
============= App组件updated ============
this.$el: [object HTMLDivElement]
this.$data: [object Object]
this.message: App msg
挂载、更新、销毁都遵循洋葱模型，从外向内通知，成了以后，从内到外，
创建时
beforeCreate,created,beforeMount---->
beforeCreate,created,beforeMount---->
<--------mounted
mounted
new Vue的beforeMount可能拿到this.$el, 在App里beforeMount里的this.$el是undefined
App根组件mounted后是的模板里的#app容器替换掉
