mounted生命周期
时间: 2023-10-21 20:36:19 浏览: 33
在 Vue.js 中,组件生命周期钩子函数可以让我们在组件的不同阶段执行自定义逻辑,其中 `mounted` 生命周期钩子函数会在组件挂载到 DOM 上后立即执行,可以用于执行一些需要访问 DOM 元素的操作。具体的生命周期函数执行顺序如下:
1. `beforeCreate`: 组件实例被创建之初,组件的数据观测和 event/watcher 事件配置之前被调用。
2. `created`: 组件实例已经完全创建,数据观测、属性和方法的运算、watch/event 事件回调均已完成,但是挂载阶段还未开始,$el 属性目前为 undefined。
3. `beforeMount`: 在挂载开始之前被调用:相关的 render 函数首次被调用。
4. `mounted`: el 被新创建的 vm.$el 替换,并挂载到实例上去之后调用该钩子函数。此时组件已经被挂载到 DOM 中,可以进行一些操作,如修改 DOM 元素。
5. `beforeUpdate`: 数据更新时调用,发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子函数中进一步地更改数据。
6. `updated`: 由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用该钩子函数。组件 DOM 已经更新,可以执行一些操作,如使用新的属性/状态更新计算属性或监听到新的事件。
7. `beforeDestroy`: 实例销毁之前调用。在这一步,实例仍然完全可用。
8. `destroyed`: Vue 实例销毁后调用。调用后,Vue 实例指示的所有东西都会解绑定,所有的事件监听器会被移除,所有的子实例都会被销毁。
其中,`mounted` 生命周期钩子函数是 Vue 实例中比较常用的一个,常用于在组件挂载到 DOM 后执行一些操作,比如获取 DOM 元素、发送网络请求等。