vue生命周期

每个Vue组件实例在创建时都需要经历一系列的初始化步骤，比如设置好数据侦听，编译模板，挂载实例到DOM，以及在数据改变时更新DOM，在此过程中，它也会运行被称为生命周期钩子的函数。

这里有张图片能更好的展示

 

beforeCreate

在组件实例初始化完成之后立即调用，在实例初始化完成、props解析之后、data（）和computed等选项处理之前立即调用。

created

在组件实例处理完所有与状态相关的选项后调用，当这个钩子函数被调用时，以下内容已经设置完成：响应式数据，计算属性、方法和侦听器。然而，此时挂载阶段还未开始，因此$el属性仍不可用。

beforeMount

在组件被挂载之前调用，当这个钩子被调用时，组件已经完成了其响应式状态的设置，但还没有创建DOM节点，它即将首次执行DOM渲染过程

mounted

在组件被挂载之后调用

为了了解什么是挂载的状态，我百度得到的结果

所有同步子组件都已经被挂载。（不包含异步组件或<Suspense>树内的组件）

其自身的DOM树已经创建完并插入了父容器，注意仅当根容器在文档中时，才可以保证组件DOM树也在文档中。

这个钩子通常于执行需要访问组件所渲染的DOM树相关的副作用，或是在服务端渲染应用中用于确保DOM相关代码仅在客户端被调用

这个钩子在服务端渲染时不会被调用

beforeUpdate

在组件即将因为一个响应式状态变更而更新其DOM树之前调用

这个钩子可以用来在Vue更新DOM之前访问DOM状态，在这个钩子中更改状态也是安全的

这个钩子在服务端渲染时不会被调用

updated

在组件因为一个响应式状态变更而更新其DOM树之后调用，

父组件的更新钩子将在其子组件的更新钩子之后调用，这个钩子会在组件的任意DOM更新后被调用，这些更新可能是由不同的状态变更导致的，如果你需要在某个特定的状态更改后访问更新后的DOM，请使用nextTick（）作为替代

beforDestroy

实例销毁之前调用，在这一步，实例仍然可以调用。

destoryed

实例销毁后调用，该钩子被调用后，vue实例所有的指令都被解绑，所有事件监听器被移除，所有子实例也被销毁。

上面是钩子函数的具体概念和执行顺序，接着从代码上了解一下：

 这是刚进入页面的执行过程，

当我点击加一后：

 当我点击销毁后：