vue生命周期（vue页面生命周期的运行逻辑）

1、生命周期图示

参考官网页面：Vue生命周期图示

2、Vue 的生命周期包括四个状态（记住这四个）

1、creating 状态 ----vue 实例被创建的过程
2、mounting 状态 ----挂到到真实的 DOM 节点，渲染出html页面
3、updating 状态 ----如果 data 中的数据改变就会触发对应组件的重新渲染
4、destroying 状态 ----实例销毁

3、四个状态对应 8 个方法

beforeCreate ----el选项 和 data 并未初始化，el、data都还是 undefined
created ----实例创建成功，完成了 data 数据的初始化，el选项还是是undefined，data已经定义，这里可以调用接口请求数据，为挂载到el选项对应的dom做准备

---

beforeMount ----完成了 el 初始化，date数据还未挂载到el选项对应的dom
mounted ----date数据挂载到el选项对应的dom，模版中的 data 数据直接显示出来了，完成挂载

---

beforeUpdate ----当 data 数据发生变化调用，发生在对应组件的重新渲染之前
updated ----触发对应组件的重新渲染

---

beforeDestroy ----在 vue 实例销毁之前调用，此时实例仍然可用
destroyed ----在 vue 实例销毁之后调用，vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁

4、代码解读

1、直接新建html文件，复制下面代码；
2、F12查看Console;
3、输入：app.message= 'this is update！！！！';
4、输入：app.$destroy() //实例销毁

    
    




     
{{ message }}