vue生命周期，vue执行顺序图，钩子函数

 一、生命周期导图

 

 

 通过代码，理解生命周期，查看钩子函数的执行顺序

注：复制就可以运行查看

  
  




  
{{ message }}

create 和 mounted 相关 

beforeCreate：el 和 data 都未初始化 
created：完成了 data 数据的初始化，el没有
beforeMount：完成了 el 和 data 初始化 
mounted：完成挂载

update 相关

在控制台 console里执行以下命令

app.message= 'yes !! I do';

当 data 里的值被修改后，将会触发update的操作

destroy 相关 

app.$destroy();

destroy操作，实例就不再受控制；

生命周期运用

beforeCreate（创建新的实例）：能不能使用这个解决请求空白的问题？

created(){}（具有默认特性的对象）：对对象及其事件完全初始化，实现函数自执行，数据观测(data observer)，属性和方法的运算， watch/event 事件回调

beforeMount（对象在DOM中适合形状）：DOM 为虚拟DOM 仍未完全加载

mounted（DOM已准备就绪并放置在页面内）：挂载元素内dom节点的获取

beforeUpdate（更改已完成，但尚未准备好更新DOM）：渲染完成，并监测到data发生变化

updated（在DOM中呈现的更改）：监测到data发生变化，并完成渲染更新视图之后触发

beforeDestroy（实例销毁之前调用，在这一步，实例仍然完全可用）：实例销毁之前调用 ， 实例仍然完全可用。

destroyed（销毁后调用）：调用后，实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

nextTick：针对单一事件更新数据后立即操作dom

watch：监听数据变化，并做相应的处理

methods:{}：方法

computed:{}：计算属性