[JavaScript知识库]Vue 生命周期

到Vue学习阶段了，（仅个人学习记录，有错误还请 麻烦大佬帮忙指出）

<!-- 1.vue 的声明周期 -->

? <!--

? ? ? vue生命周期分为 四个分类,每个分类分为2个函数,共8个

? ? ? 初始化 - 挂载 - 更新 - 销毁

? ? ? ? ? 初始化 ?: beforeCreate - created

? ? ? ? ? 挂载 ? ?: beforeMount - mounted

? ? ? ? ? 更新 ? ?: begoreUpdate - updated

? ? ? ? ? 销毁 ? ?: beforeDestroy - destroyed

? ? ? ? ? 函数执行顺序:

? ? ? ? ? ? 初始化:

? ? ? ? ? ? ? 1.初始化 new Vue() 实例

? ? ? ? ? ? ? 2.Init Events & Lifecycle – 初始化事件和声明生命函数

? ? ? ? ? ? ? 3.调用 beforeCreate() 函数,生命周期钩子函数被执行

? ? ? ? ? ? ? 4.Vue 内部添加 data 和 mothods 等

? ? ? ? ? ? ? 5.调用 created() 函数,实例创建

? ? ? ? ? ? ? 6.编译模板-开始分析?

? ? ? ? ? ? ? 7.Has el option? – 是否有el选项,检查要挂到哪里 ,? 没有-调用$mount()方法 , 有-继续检查template选项

? ? ? ? ? ? ? ? ? 7.1 template选项检查? 有- 编译template返回render渲染函数 , 无– 编译el选项对应标签作为template(要渲染的模板)

? ? ? ? ? ? 挂载:

? ? ? ? ? ? ? 8.真实 DOM 挂载之前 --- 调用 beforeMount() 函数,生命周期钩子函数被执行

? ? ? ? ? ? ? 9.create - 把虚拟DOM和渲染的数据一并挂到真实DOM上

? ? ? ? ? ? ? 10.真实 DOM 挂载完毕 --- 调用 mounted() 函数,生命周期钩子函数被执行

? ? ? ? ? ? 更新:

? ? ? ? ? ? ? 11.当data里数据改变, 更新 DOM 之前 --- beforeUpdate() 生命周期钩子函数被执行

? ? ? ? ? ? ? 12.Virtual DOM…… – 虚拟 DOM 重新渲染, 打补丁到真实DOM

? ? ? ? ? ? ? 13.真实 DOM 更新完毕 --- updated() 生命周期钩子函数被执行

? ? ? ? ? ? ? (data 数据改变时 重复更新循环)

? ? ? ? ? ? 销毁:

? ? ? ? ? ? ? (当$destroy()被调用 – 比如组件DOM被移除(例v-if))

? ? ? ? ? ? ? 14.beforeDestroy - 生命周期钩子函数被执行

? ? ? ? ? ? ? 15.继续 --- 拆卸数据监视器、子组件和事件侦听器

? ? ? ? ? ? ? 16.实例销毁后 --- destroyed() ?生命周期钩子函数被执行

? ? ? ? ? ? ?

? ?-->