Vue2.0学习——生命周期、钩子函数

最新推荐文章于 2022-09-22 16:48:41 发布

原创

最新推荐文章于 2022-09-22 16:48:41 发布 · 658 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #生命周期 #钩子函数 #vue2.0 #前端

本文详细介绍了Vue2.0的组件生命周期，包括created、mounted等关键阶段，并通过实例演示了各钩子函数的作用，帮助读者深入理解Vue组件的创建、更新和销毁过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Vue的生命周期就像人的一生，从出生、儿童、青年、中年、老年到死亡，经历不同过程，Vue的组件也会经历从创建到更新或销毁的过程，而钩子函数，就是把不同的任务挂到不同的阶段，如ajax获取数据就可以在mounted阶段。下面结合网上一些学习到的东西综合自己的见解简述一下这部分内容。

一、Vue生命周期简介

Vue生命周期

vue生命周期

Vue生命周期钩子函数Vue1.0+和Vue2.0对比

上面两张图片分别是VueJs官网文档中对于组件生命周期的说明和Vue1.0+和Vue2.0钩子函数的对比。讲上面的内容简化一下，可以得到如下这张简化版的：

看起来简单更加清晰了一些。

二、生命周期探究

为了更加直白的理解，网上有一段测试代码，通过控制台输出的方式清晰地把每一个钩子函数一一展现，对理解很有用处，下载搬过来用一下以便加深记忆。<

最低0.47元/天解锁文章

200万优质内容无限畅学

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

啦啦啦987321

关注关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

vue4 生命周期函数

duzhe17629085113的博客

12-13

1242

vue生命周期函数是实例从创建到销毁的过程，从开始创建实例，初始化数据，编译模板，挂在DOM-渲染，更新-渲染，销毁的过程， beforecreate（vm实例创建中）created（vm实例创建完毕）、beforeMount（挂在dom之前）、mounted（挂载到dom上）、beforeUpdata（更新数据之前）、updated（数据更新完毕）、beforeDestroy（销毁实例之前）、destroy（实例销毁）意义：生命周期有多个事件钩子，在让我们控制整个实例过程中更容易形成好的逻辑 ..

Vue2.0——组件生命周期

ling_xy的博客

08-10

993

文章目录1.虚拟dom2.八大生命周期 生命周期钩子的 this 上下文指向调用它的 Vue 实例（VueComponent） 1.虚拟dom 真实dom : 原生dom - - - 按照dom原生操作顺序实时更新界面（造成性能低）虚拟dom : vNode 和dom对象一致 , 等待一系列操作完成之后一次性更新界面 2.八大生命周期 beforeCreate，created，beforeMount，mounted，beforeUpdate，updated，beforeUnmount，

参与评论您还未登录，请先登录后发表或查看评论

【Vue2.0】vue生命周期中的钩子函数

李留白

02-27

1774

最常用的就是created函数，后续会贴一些实际项目中使用到的关于生命周期使用的代码。

vue生命周期钩子 created mounted

gloria_chenjing的博客

02-01

1693

https://segmentfault.com/a/1190000014705819

vue每个生命周期内都可以做什么

m0_56153067的博客

08-05

3395

Vue生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。阶段及作用：创建前/后(1.beforeCreate,2.created), 载入前/后(3.beforeMount,4.mounted), 更新前/后(5.beforeUpdate,6.updated), 销毁前/后(7.beforeDestroy,8.destroyed), 激活时/未激活时(9.activated,10

vue2.0生命周期钩子函数详解

m0_53972782的博客

06-17

310

beforeCreate:(实例创建之前被调用)在beforeCreate生命周期函数执行的时候,data和methods中的数据还没有被初始化 created:(实例创建成功后被调用)在created中的,data和methods都已经被初始化.如果想要操作data中的数据或者调用methods中的方法,最早只能在created中操作 beforeMount:(实例挂载之前被调用)此函数执行的时候,模板已经在内存中编译好了,但是尚未挂载到页面中去,所以页面还是旧的 mounted:(实例挂载完.

【面试必问题】Vue 2.0——生命周期和钩子函数的理解、以及生命周期的实际应用场景

时间飞逝的博客

01-22

1481

1、前言 Vue 框架，作为一个主流的框架，不管是大公司还是小公司都用应用这个框架，所以作为前端开发肯定不可避免就用到了，所以我们不仅要学会用，更要学会理解这个框架，这样不管是对我们利用这个框架工作，或者是我们找工作面试的时候，才能更加自信，更加游刃有余。 2、Vue 2.0 的生命周期 下面这张图就可以完美的解释了Vue 2.0 的生命周期了 Vue 1.0 和 Vue 2.0 ...

Vue的生命周期和钩子函数

桐花思雨

02-10

1724

目录`Vue` 的生命周期`Vue` 的生命周期与钩子函数 Vue 的生命周期 通俗地来说 vue 的生命周期：就是 vue 实例从创建到销毁的过程，我将这个过程中的一些关键点抽取出来，简化为下面这个流程图 Vue 的生命周期与钩子函数 vue 2.0 提供了一系列钩子函数，这些函数和生命周期的各个阶段一一对应钩子函数描述 beforeCreate 在实例初始化之后，数据观测（data observer）和 event/watch事件配置之前被调用 created 在实例创建完成后立即

Vue2.0——组件

qq_56607109的博客

09-22

943

组件是可复用的 Vue 实例,主要用于开发中具有相同特征不同数据的模块把它集成为一个组件供重复利用组件的属性不能用大写字母组件的名字可以用驼峰命名法,但是使用的时候必须用连字符全局注册的组件使用时不能使用单标签(不会报错,但是只能使用一次多次使用只显示第一个)注册的组件不要跟系统标签同名一个vm实例可以有多个局部组件,但是只能供当前vm实例使用不能用外部data里面的数据，因为他是Vue全局的。必须要在过滤器中声明：而且必须在new Vue前申明，不然Vue里面的函数都加载完了还没有找到数据，就

Vue 2.0 生命周期和钩子函数

qq_42653576的博客

04-04

234

Vue 2.0 生命周期和钩子函数首先看图：还是用代码来解释： <!DOCTYPE html> <html> <head> <title></title> <script type="text/javascript" src="https://cdn.jsdelivr.net/vue/2.1.3/vue.js"></script> </head> <body> <div

156.Vue实现个人博客（四）【Vue2.0-自定义指令（钩子函数）】 2019.03.13

youyouwuxin1234的博客

03-14

556

1、钩子函数指令定义函数提供了几个钩子函数（可选）： bind: 只调用一次，指令第一次绑定到元素时调用，用这个钩子函数可以定义一个在绑定时执行一次的初始化动作。 inserted: 被绑定元素插入父节点时调用（父节点存在即可调用，不必存在于 document 中）。 update: 被绑定元素所在的模板更新时调用，而不论绑定值是否变化。通过比较更新前后的绑定值，可以忽略不必要的模板...

Vue2.0生命周期和钩子函数

孟林洁的博客

07-20

185

转记！ Vue2.0 探索之路——生命周期和钩子函数的一些理解

vue2.0的生命周期和钩子函数深度解析

关注最新技术问题并持续维护更新

04-18

2445

一、理清Vue的生命周期和钩子函数

vue 页面加载时触发的函数 mounted: function () {

kxukai的博客

12-19

7972

//页面加载时触发的函数 mounted: function () { this.adddata(); this.banklist(); this.editdata(); },

Vue学习笔记（三）路由···

weixin_46015333的博客

01-18

1184

文章目录一、自定义指令二、单文件组件三、反向代理四、路由1、引入组件2、配置路由表编程式导航3、路由拦截总结一、自定义指令指令：为了操作底层dom，作者给留的方案实际应用：可以通过指令什么时候在dom创建完成，从而进行依赖dom的初始化工作。指令的生命周期： bind 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置 inserted 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中) update 更新时调用，但是可能发生在其子

Vue.js中的生命周期函数

AllEyezOnMewas的博客

03-11

1677

1. 组件创建阶段： beforeCreate()，这是我们遇到的第一个生命周期函数。表示实例被完全创建出来之前，会执行这个生命周期函数。 created()，这是遇到的第二个生命周期函数。 beforeMount()，这是遇到的第三个生命周期函数。表示模板已经在内存中编辑完成了，但是尚未把模板渲染到页面中去。在beforeMount()执行的时候，页面中的元素，还没有真正被替换过来，只是之前...

看清楚 mounted 就是一个函数

wyangue的博客

07-29

422

mounted就一个函数 mounted:function() }, 不是 mounted：{ function（）{ }， }，头发都拽没了才看见

vue函数如何调用其他函数?_详解 vue 生命钩子函数

weixin_39689687的博客

11-20

2227

好,接下来让我们学习一下vue的生命周期, vue 的生命周期也叫钩子函数,是vue从创建到销毁所触发的函数,1.beforeCreate(){console.log("创建之前");}, beforeCreate(),这是第一个生命周期函数, 表示实例完全被创建出来之前, 会执行它,此时data和methods中的数据和方法都还没有被初始化,在这里是获取不到data中的数据的,console会报...

Vue 正确理解mounted、beforeUpdate、updated三个钩子函数的关系