vue生命周期简介和钩子函数

简单的来说一下vue的生命周期函数

• beforeCreate // el 和 data 并未初始化
• created // 完成了data数据的初始化，el没有
• beforeMount // 完成了虚拟el和data初始化
• mounted // 完成了真实el和data初始化
• beforeUpdate
• updated
• beforeDestroy
• destroyed

对比下create和mounted

• created:在模板渲染成html前调用，即通常初始化某些属性值，然后再渲染成视图。
• mounted:在模板渲染成html后调用，通常是初始化页面完成后，再对html的dom节点进行一些需要的操作。

其实两者比较好理解，通常created使用的次数多，而mounted通常是在一些插件的使用或者组件的使用中进行操作，比如插件chart.js的使用: var ctx = document.getElementById(ID);通常会有这一步，而如果你写入组件中，你会发现在created中无法对chart进行一些初始化配置，一定要等这个html渲染完后才可以进行，那么mounted就是不二之选

总结

我们经常使用的地方

beforecreate : 举个栗子：可以在这加个loading事件
created ：在这结束loading，在这发起后端请求，拿回数据，配合路由钩子做一些事情
mounted ： 如果需要获取dom的可以在这里操作

原文地址：https://segmentfault.com/a/1190000018915168