这是我参与11月更文挑战的第7天，活动详情查看：2021最后一次更文挑战
前言
Vue组件生命周期创建(create)、挂载(mount)、更新(update)、销毁(destory)四个阶段。
每个 Vue 实例在被创建时都要经过一系列的初始化过程——例如，需要设置数据监听、编译模板、将实例挂载到 DOM 并在数据变化时更新 DOM 等。
用官方的图如下所示可清晰展示生命周期
钩子函数
在vue的生命周期过程中会运行一些钩子函数， 即组件在加载的过程中，加载到某个阶段时，自动触发的函数。
- beforeCreate
在实例初始化之后，数据观测(data observer) 和 event/watcher 事件配置之前被调用；如果在 beforeCreate 函数里面去访问 data 数据对象，是访问不到的。
在main.js下面打印如下，访问页面可以看到
- created
在这个阶段完成了事件的初始化，但$el 属性目前不可见；在 created 函数里面可以使用数据，也可以更改数据(这个阶段还没有创建虚拟dom)。
我们在这里可以调用methods中的方法，改变data中的数据，并且修改可以通过vue的响应式绑定体现在页面上，获取computed中的计算属性等等，通常我们可以在这里对实例进行预处理，如果要在这里发ajax请求，值得注意的是，这个周期中是没有什么方法来对实例化过程进行拦截的。
因此假如有某些数据必须获取才允许进入页面的话，并不适合在这个方法发请求，建议在组件路由钩beforeRouteEnter中完成
- beforeMount
在挂载开始之前被调用，相关的（渲染函数）模板首次被调用。$el 属性可见。但此时在 beforeMount 函数中依然无法无法获取到通过挂载模板生成的DOM。
这个阶段把data里面的数据和模板生成html，完成了el和data 初始化，注意此时还没有挂在html到页面上。
- mounted
挂在完成，也就是模板中的HTML渲染到HTML页面中，此时一般可以做一些ajax操作，mounted只会执行一次。
- **beforeUpdate
**
当数据发生变化的时候，beforeUpdate 这个钩子函数才会执行。
- **updated
**
在由于数据更改导致地虚拟DOM重新渲染和打补丁只会调用，调用时，组件DOM已经更新，所以可以执行依赖于DOM的操作，然后在大多是情况下，应该避免在此期间更改状态，因为这可能会导致更新无限循环，该钩子在服务器端渲染期间不被调用。
- **beforeDestroy
**
在实例销毁之前调用，实例仍然完全可用，
- 这一步还可以用this来获取实例。
- 一般在这一步做一些重置的操作，比如清除掉组件中的定时器 和 监听的dom事件。
- **destroyed
**
Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
注意：路由跳转默认都会销毁上一个组件，router.push、go、replace都走了销毁钩子。
计算属性与监听器
在vue组件里我们还经常使用到2个成员
- computed
当其依赖的属性的值发生变化时，计算属性会重新计算，反之，则使用缓存中的属性值。
即用来监控自己定义的变量，该变量不在data里面声明，直接在computed里面定义，然后就可以在页面上进行双向数据绑定展示出结果或者用作其他处理。如下所示，在组件里可以直接使用helloLength这个字段
- watch
主要用于监控vue实例的变化，它监控的变量当然必须在data里面声明才可以，它可以监控一个变量，也可以是一个对象。
总结
理解了vue的生命周期，可以让我们的代码更具稳定性，根据不同的生命周期可以选择做对应的业务处理，或者数据改变。更多的时候，我们需要在实际业务中去感受，每个生命周期的不同，才能加深我们的理解。
文章有引用：
