Vue生命周期概述(看完就懂)

最新推荐文章于 2024-06-21 00:48:08 发布
最新推荐文章于 2024-06-21 00:48:08 发布
阅读量534 收藏 1
点赞数 3
分类专栏： 小白笔记 文章标签： vue.js javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wzj12345545646/article/details/120602598
版权
本文详细介绍了Vue组件的生命周期，包括初创期、挂载期、更新期和销毁期的各个钩子函数及其作用，如beforeCreate、created、beforeMount、mounted等。同时，补充讨论了缓存钩子activated和deactivated在中的应用，以及错误捕获钩子errorCapture。通过图文结合的方式，帮助读者深入理解Vue组件的工作原理。
摘要由CSDN通过智能技术生成

 目录

一，了解生命周期的四阶段

1.初创期

2.挂载期

3.更新期

4.销毁期

二，补充

1.缓存钩子

2.报错钩子

先上一张图。

一，了解生命周期的四阶段

上图就是一个完整的生命周期，生命周期必经四个阶段，每个阶段有两个钩子函数，顺便提一下钩子函数（不需要你去调用，它在需要执行的地方就会自动调用）

我写一下这几个钩子，下面给大家详细介绍钩子做了什么，什么时候进行调用。

1.初创期

        beforeCreat

        created

        1.初创期，顾名思义，初创期就是刚开始创建，初创期有两个钩子函数(beforecreat和created)，我给大家说一下两个钩子函数的作用

        beforeCreat，翻译过来就是创建之前需要调用的钩子，它是在创建vue实例之后，ob sever和事件配置之前调用，调用之后进行data的初始化

        created，这就是创建之后了，这时候在它里面做了两件事

        第一。data初始化已完成

        第二。计算属性和一些事件还有watch的调用

2.挂载期</

最低0.47元/天 解锁文章
M-A-F
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Vue生命周期简述
henlingxi的博客
02-12 1869
一、什么是生命周期 Vue生命周期是指vue实例对象从创建之初到销毁的过程。 生命周期图示： 二、生命周期中的钩子函数 1.beforeCreate beforeCreate() { // 还未进行数据代理 // 此时无法通过vm访问data中的数据，methods中的方法 }, 2.created created() { // 已完成初始化 // ...
Vue js 的生命周期（看了就懂）(推荐)
10-17
Vue.js 的生命周期是理解其工作原理的关键部分，它描述了从实例创建到销毁的各个阶段。通过深入理解Vue.js的生命周期，开发者可以更好地控制和优化应用的性能。 Vue.js的生命周期可以分为以下八个主要阶段： 1. **...
vue生命周期概述
all_outD的博客
10-07 176
vue是一套用于构建用户界面的渐进式框架。现在频繁使用于各个项目中，本次就是介绍一下vue的生命周期。 其中包含了8个生命周期钩子，也叫生命周期函数 beforeCreate( 创建前 ) 使用这个钩子，组件的选项对象并没有创建，el和data都还没初始化，所以data、methods和computed等都用不了。一般用来在组件挂在之前渲染一些东西。 created ( 创建后 ） 这时候上面的data、methods、computed都已经创建完成了，数据观测，属性和方法的运算，watch/event事件
Vue生命周期总结（四个阶段，八个钩子函数）
最新发布
qq_37875849的博客
06-21 1056
详细：这个钩子函数获取dom的内容是更新之后的内容生成新的虚拟dom，新的虚拟dom与之前的虚拟dom进行比对，差异之后，就会进行真实dom渲染。：这个钩子函数初始化的不会执行,当组件挂载完毕的时候，并且当数据改变的时候，才会立马执行,这个钩子函数获取dom的内容是更新之前的内容。该钩子被调用后，对应 Vue 实例的所有指令都被解绑，所有的事件监听器被移除，所有的子实例也都被销毁。：挂载阶段的最后一个钩子函数,数据挂载完毕，真实dom元素也已经渲染完成了,这个钩子函数内部可以做一些实例化相关的操作。
Vue生命周期简单概括
weixin_48622918的博客
08-10 177
做项目时遇到的小坑，在created(){}生命周期函数中，操作Dom时获取不到Dom，查找错误浪费了很多时间，所以恶补了一下 beforeCreate(){ data , methods ，Dom 都没有初始化 } created(){ data , methods 初始化好了，但页面Dom没有挂载，一般用来发Ajax 请求 } beforeMount(){ 此时模板在内存中编译完成，并没有渲染到页面上 } mount(){ 页面已经渲染好了，此时一般用第三方UI插件 } befo
vue生命周期
热门推荐
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
Vue生命周期（简要概述）
m0_60237095的博客
10-24 445
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前/.
浅析Vue 生命周期
08-27
浅析Vue 生命周期 Vue 生命周期是指从 Vue 实例创建到销毁之间的一系列状态，整个过程可以被分为多个阶段，每个阶段都有其特定的钩子函数，可以在不同的生命周期中执行特定的操作。 实例初始化阶段 在创建 Vue ...
vue生命周期实例小结
10-18
Vue实例在其生命周期中经历一系列的初始化、运行和销毁过程，每个阶段都有相应的钩子函数，允许开发者在特定时刻执行特定的操作。下面是对Vue生命周期的详细解释： ### 初始化阶段 1. **`beforeCreate`**：在Vue...
浅谈Vuex注入Vue生命周期的过程
10-16
在这个方法中，Vuex将一个名为`vuexInit`的函数混入Vue的生命周期钩子，如`beforeCreate`或`_init`，这样就可以在Vue实例创建时自动执行一些初始化操作，将Vuex的状态管理和生命周期紧密结合。 在Vue的组件生命周期...
vue生命周期和react生命周期对比【推荐】
10-18
对于Vue和React的生命周期对比，我们可以发现Vue提供了更多的生命周期钩子，使开发者可以更细致地控制组件的创建、挂载、更新和销毁过程。而React虽然钩子函数相对较少，但使用新的函数式组件和Hooks API可以实现...
Vue生命周期
weixin_39288299的博客
06-18 121
计算属性 计算属性是基于它们的响应式依赖进行缓存的。只在相关响应式依赖发生改变时它们才会重新求值。（有缓存）。具有getter和setter。 computed: { fullName: { // getter get: function () { return this.firstName + ' ' + this.lastName }, // setter set: function (newValue) { var names = n
vue 生命周期 简述
风起未来
04-26 168
vue 生命周期 vue的生命周期就是从创建到销毁的过程中，在某个特定的时间点自动执行的函数，一共有8个生命周期函数 beforeCreate() created() beforeMount() mounted() beforeUpdate() updated() beforeDestry() destroyed() 在beforeCreate和created钩子函数之间的生命周期 初始化数据。created()时，data属性及其内部数据已到位。 created钩子函数和beforeMount间的生命周期
简述vue生命周期
qq_45130646的博客
02-27 2282
简述vue生命周期：vue生命周期分为三个阶段: （一）初始化阶段 1.第一个执行生命周期函数,注意: 在这个函数执行的时候vue实例仅仅完成内部事件和使用生命周期方法初始化 beforeCreate(){} 2.第二个执行生命周期函数,注意: 在这个函数执行的时候vue实例已经完成自定义data、methods、computed等属性初始化以及语法校验 created(){} 3.第三个执行的生命周期函数 注意:在这个函数执行的时候vue实例仅仅是将el属性指向的html编译成vue模板,此时并
简述Vue生命周期
wanghongpu9305的博客
01-29 353
1、创建期间的生命周期方法 beforeCreate:方法特点——调用时没有初始化好Vue实例中的数据（data）和方法（methods）。即调用此方法时还不能调用Vue实例的数据和方法。 created:——是我们最早能够访问Vue实例中保存的数据和方法的地方。 beforeMount:——表示Vue已经编译好了最终模板，但是还没有将最终模板渲染到界面上。 mounted:——表示Vue已经完成了模板的渲染，表示我们已经可以拿到界面上渲染之后的内容了。 2、运行期间的生命周期方法...
vue生命周期的概述
Tmevolcy的博客
05-07 151
如何正确的理解vue的生命周期？vue的生命周期就是vue实例创建的初始化到实例销毁的过程，期间会有8个钩子的调用before Createcreatedbefore Mountmountedbefore Updateupdatedbefore Destroydestroyed vue的生命周期就是vue实例创建的初始化到实例销毁的过程，期间会有8个钩子的调用 before Create 数据为挂...
Vue的生命周期详解（简单易懂）
weixin_42343966的博客
12-09 9323
Vue的生命周期就是实例从创建到销毁的一个过程，即从创建、初始化数据、编译模板、挂载Dom->渲染、更新->渲染，卸载等一系列的过程。
Vue的生命周期
weixin_30663471的博客
08-11 85
生命周期介绍 简单说就是一个组件从开始到最后消亡所经历的各种状态，就是一个组件的生命周期 vue的生命周期图 beforeCreate（创建前） beforeCreate（初始化页面前） 详情：实例初始化之后，组件被创建时，这时候 el，data，message 都是 underfined 场景：可以加入 loading 事件；在服务器端的应用场景中，这个时候发送数据请求比较多一些 cre...
vue 生命周期_源码级回答： 介绍一下 Vue 的生命周期
weixin_39984578的博客
12-12 101
前言相信大家对 Vue 有哪些生命周期早就已经烂熟于心，但是对于这些生命周期的前后分别做了哪些事情，可能还有些不熟悉。本篇文章就从一个完整的流程开始，详细讲解各个生命周期之间发生了什么事情。注意本文不涉及 keep-alive 的场景和错误处理的场景。初始化流程new Vue从 new Vue(options) 开始作为入口，Vue 只是一个简单的构造函数，内部是这样的：function...
vue2 和vue3的生命周期概述
03-16
下面是Vue 2和Vue 3的生命周期概述： Vue 2的生命周期包括以下阶段： 1. beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。 2. created：在实例创建完成后被调用，此时实例已完成数据观测，但尚未...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值