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时