vue生命周期介绍
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如,需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。同时在这个过程中也会运行一些叫做生命周期钩子的函数,这给了用户在不同阶段添加自己的代码的机会。
要想了解vue,那么首先需要搞清楚vue是如何运行的。下面我们就来看看使用vue-cli3创建的项目时如何运行的,下图中是每个文件处的输出:






输出结果如下:

从上面的结果可以看到首先输出的是app.vue,那么具体是不是这么回事呢?其实不是的。Vue的运行首先是去执行npm脚本,然后根据脚本定义的启动文件,cli3在这方面做了升级,所以不能直观看到npm脚本文件了。这里给大家说说正确的执行顺序如下:

了解了vue项目的运行顺序,那么我们需要知道每个vue实例的生命周期钩子的函数,先看看官方的生命周期图示:

官方也给出了周期函数的注意事项:

下面我们自己来看看实际的生命周期函数运行情况:

运行结果如下:

如图有的周期函数捕捉不到,其实在实际的开发中我们基本上常用的函数也就那么一两个:created/mounted。
created:在模板渲染成html前调用,即通常初始化某些属性值,然后再渲染成视图。
mounted:在模板渲染成html后调用,通常是初始化页面完成后,再对html的dom节点进行一些需要的操作。
其实两者比较好理解,通常created使用的次数多,而mounted通常是在一些插件的使用或者组件的使用中进行操作,比如插件IScroll的使用。
总结:created通常用于初始化数据 mounted通常用于需要操作dom时