持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第13天，点击查看活动详情juejin.cn/post/714765…

实例化期

beforeCreate

执行时机：实例、组件通过new Vue（）创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数。

1. 这个时候，数据还没有挂载呢，只是一个空壳，无法访问数据和真实dom，一般不做操作。
2. 在该函数里访问不到任何数据。。所以基本不在它里面做任何事情

created

执行时机：组件挂载数据，绑定事件等等，然后执行该函数。

1. 在这里面可以访问数据了，也可以更改数据，不会触发update钩子，它是相当于倒数第二次修改date的机会。在他里面可以请求数据，发送ajax。
2. 接下来会判断虚拟DOM挂载到哪个页面上去，就找这个el属性，没有el就找$mount
3. 注意，该函数有可能会调用两次

beforeMount

执行时机：虚拟DOM生成之后，触发该函数，该函数是最后一次修改data的机会，并且不会触发其他钩子函数。

1. 在这里面可以请求ajax，也没问题。
2. 在这里面做初始化工作
3. 这时候VDOM已经生成，data也生成了。

mounted

执行时机：该函数是虚拟dom挂载到页面之后执行，这也说明真实DOM生成了。该函数只会执行一次

1. 在该函数里修改data，组件会重新渲染。
2. 第三方库也可以在这里面使用。个人认为，它类似于react生命周期中的componentDidMount钩子。
3. 注意：该函数不保证子组件是否挂载，如果想在这里用到子组件，那么就在该函数里使用$nextTickt(){}写代码，它是整个视图都渲染之后才执行，所以它就是在下一次更新之后调用。
4. 该钩子在服务器端渲染期间不被调用。

存在期

beforeUpdate

执行时机：当组件或实例的数据更改之后立即执行。

1. 然后vue的VDOM机制会重新创建dom与上一次的虚拟DOM树算法进行对比之后重新渲染。
2. 在它里面基本不做任何事情

updated

执行时机：组件更新完成之后执行该函数。

1. 这时候data数据已经更改完成，dom也重新render完成，可以对更新之后的dom进行操作。
2. 注意：该函数不保证子组件是否更新完成，如果想在这里使用更新之后的子组件节点、数据，在这里面调用$nextTick

销毁期

beforeDestroy

执行时间：组件销毁之前执行

destroyed

执行时机：组件销毁之后执行