vue加载的生命周期
时间: 2023-09-20 21:14:56 浏览: 34
Vue.js 的生命周期钩子函数指的是在 Vue 实例创建、更新、销毁等不同阶段触发的一系列函数。以下是 Vue.js 组件的生命周期钩子函数:
1. beforeCreate:在实例创建之前被调用,此时组件的数据观测和初始化还未开始。
2. created:在实例创建完成后被调用,此时组件已完成数据观测,属性和方法的运算,但尚未挂载到 DOM 上。
3. beforeMount:在组件挂载之前被调用,此时模板已编译完成,但尚未渲染成真实的 DOM。
4. mounted:在组件挂载到 DOM 后被调用,此时组件已经渲染到页面上,并且可以操作 DOM 元素。
5. beforeUpdate:在组件更新之前被调用,发生在虚拟 DOM 重新渲染和打补丁之前。
6. updated:在组件更新之后被调用,发生在虚拟 DOM 重新渲染和打补丁之后。
7. beforeDestroy
相关问题
vue 生命周期加载
Vue的生命周期包括了实例的创建、挂载、更新和销毁等阶段。下面是Vue实例的生命周期钩子函数及其触发时机:
1. beforeCreate:在实例初始化之后,数据观测和事件配置之前触发。
2. created:在实例创建完成后被立即调用。在这一步,实例已完成以下配置:数据观测(data observer)、属性和方法的运算、watch/event事件回调。然而,挂载阶段还没开始,$el属性目前不可见。
3. beforeMount:在挂载开始之前被调用。相关的render函数首次被调用。
4. mounted:el被新创建的vm.$el替换,并挂载到实例上去之后调用该钩子。
5. beforeUpdate:数据更新时调用,发生在虚拟DOM重新渲染和打补丁之前。
6. updated:由于数据更改导致的虚拟DOM重新渲染和打补丁完成之后调用。
7. beforeDestroy:实例销毁之前调用。在这一步,实例仍然完全可用。
8. destroyed:实例销毁后调用。该钩子被调用后,Vue实例指示的所有东西都会解绑定,所有事件监听器会被移除,所有子实例也会被销毁。
这些生命周期钩子函数可以让开发者在不同阶段的实例生命周期中执行相关的操作,以满足特定的需求。
vue生命周期加载顺序
Vue 的生命周期钩子函数可以分为 8 个阶段,按照加载顺序依次为:
1. beforeCreate:实例刚被创建,数据观测和事件机制都未初始化,无法访问 data、computed、methods 等属性和方法。
2. created:实例已经完成数据观测和事件机制的初始化,可以访问 data、computed、methods 等属性和方法,但无法访问 $el。
3. beforeMount:模板编译完成,但尚未挂载到页面上。
4. mounted:实例已经挂载到页面上,此时可以访问到 $el。
5. beforeUpdate:响应式数据更新之前调用,此时虚拟 DOM 已经完成渲染。
6. updated:响应式数据更新之后调用,此时虚拟 DOM 已经完成渲染。
7. beforeDestroy:实例销毁之前调用,此时实例仍然完全可用。
8. destroyed:实例销毁之后调用,此时实例已经不可用。
相关推荐
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)