vue的生命周期

实例生命周期

• 所有的 Vue 组件都是 Vue 实例，并且接受相同的选项对象即可 (一些根实例特有的选项除外)。
• 实例生命周期也叫做：组件生命周期

生命周期介绍

• vue生命周期钩子函数
• 简单说：一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期

组件生命周期函数的定义：从组件被创建，到组件挂载到页面上运行，再到页面关闭组件被卸载，这三个阶段总是伴随着组件各种各样的事件，那么这些事件，统称为组件的生命周期函数！

• 生命周期的钩子函数：框架提供的函数，能够让开发人员的代码，参与到组件的生命周期中。也就是说，通过钩子函数，就可以控制组件的行为

• 注意：vue再执行过程中会自动调用生命周期钩子函数，我们只需要提供这些钩子函数即可

• 注意：钩子函数的名称都是固定的！！！

钩子函数 - beforeCreate()

• 说明：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用
• 注意：此时，无法获取 data中的数据、methods中的方法

钩子函数 - created()

• 注意：这是一个常用的生命周期，可以调用methods中的方法、改变data中的数据
• vue实例生命周期 参考1
• vue实例生命周期 参考2
• 使用场景：发送请求获取数据

钩子函数 - beforeMounted()

• 说明：在挂载开始之前被调用

钩子函数 - mounted()

• 说明：此时，vue实例已经挂载到页面中，可以获取到el中的DOM元素，进行DOM操作

钩子函数 - beforeUpdated()

• 说明：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。你可以在这个钩子中进一步地更改状态，这不会触发附加的重渲染过程。

钩子函数 - updated()

• 说明：组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。

钩子函数 - beforeDestroy()

• 说明：实例销毁之前调用。在这一步，实例仍然完全可用。
• 使用场景：实例销毁之前，执行清理任务，比如：清除定时器等

钩子函数 - destroyed()

• 说明：Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。