举例演示vue生命周期的作用

Vue生命周期的作用是在组件的不同阶段执行相应的操作，以便控制组件的行为和数据的变化。以下是Vue生命周期的一些常见示例：

1. beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。在这个阶段，还无法访问到数据和methods。

2. created：在实例创建完成后被立即调用。在这个阶段，可以访问到数据和methods，但是还不能进行DOM操作。

3. beforeMount：在挂载开始之前被调用，相关的render函数首次被调用。在这个阶段，可以进行一些需要在挂载之前处理的操作。

4. mounted：在实例挂载到DOM上后调用，此时组件已经渲染完成。在这个阶段，可以进行DOM操作、请求数据等。

5. beforeUpdate：在数据更新之前被调用，可以在这个阶段对更新前的数据进行处理。

6. updated：在数据更新完成之后被调用，此时DOM也已经更新。在这个阶段可以对更新后的DOM进行操作。

7. beforeDestroy：在实例销毁之前调用。可以在这个阶段进行清理工作，比如清除定时器、解绑事件等。

8. destroyed：实例销毁后调用。在这个阶段，实例中的所有东西都会被解除绑定，监听器也会被移除。

通过在不同的生命周期钩子函数中执行不同的操作，可以实现诸如数据初始化、DOM操作、数据更新、销毁前的清理等功能。