实例生命周期钩子
官方说法：每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数，这给了用户在不同阶段添加自己的代码的机会。
1.vue生命周期钩子 ： vue实例从加载到销毁过程中会执行一些回调函数
-
生命周期： vue实例从创建到销毁的过程 (vue实例创建，dom树完成渲染)
钩子 :回调函数
vue生命周期4个阶段8个钩子
2.vue生命周期4个阶段8个钩子
-
阶段一： 创建 （创建vue实例） beforeCreate,created
-
阶段二：挂载 （data渲数据染到el） beforeMount， mounted
-
阶段三： 更新 （检测data变化并更新el） beforeUpdated updated
-
阶段四： 销毁 （解除data与el的绑定关系、） beforeDestroy ， destroy
** 3.vue第一次加载的时候会执行那几次钩子**
-
3.1创建vue实例之前 : beforeCreate
-
3.2创建vue实例之后 : created
-
**3.3挂载前 **： beforeMount
-
3.4挂载后（初始渲染） ： mouned
vue生命周期4个阶段8个钩子工作流程
代码演示
<script>
let app = new Vue({
// 挂载点
el: '#app',
// 要渲染的数据
data: {
msg: '我是小郑'
},
// 1.beforeCreate : 创建vue实例之前
beforeCreate() {
},
// 2.created : vue实例创建成功
created() {
},
// 3.beforeMOunt : data数据挂载到el之前
beforeMOunt() {
},
//5 beforeUpdate : 数据更新前 （检测数据变化了，单页面还没有更新）
beforeUpdate() {
},
// 6.updated : 完成数据更新 （把修改后的data渲染到页面）
updated() {
},
// 7.beforeDestroy : vue 实例销毁前
/*
销毁前 ： 不是指vue实例销毁，而是解除data和el的绑定关系
就是 ： 以后data变量 跟 el没有关系了
*/
// 8. 已经销毁
destroyed() {
}
})
