VUe的生命周期分析

最新推荐文章于 2022-07-29 09:38:45 发布
最新推荐文章于 2022-07-29 09:38:45 发布
阅读量206 收藏
点赞数
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wenxin_liu/article/details/107732620
版权
本文详细探讨了Vue组件的生命周期，包括beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy和destroyed各阶段。在created阶段，所有属性和方法已挂载；mounted阶段可访问真实DOM；updated阶段注意避免频繁操作；beforeDestroy用于解绑事件，destroyed则断开DOM关联。
摘要由CSDN通过智能技术生成

生命周期：一个组件从创建到销毁的这个过程叫做生命周期 生命周期钩子函数
1、组件从创建到销毁的过程
1、创建前 创建后
2、挂载前 挂载后
3、更新前 更新后
4、销毁前 销毁后

如下图：
在这里插入图片描述

beforeCreate

当前生命周期函数主要用来做初始化工作,在这个生命周期函数中我们可以创建一个loading

created:(*****)

创建后:
1、在当前生命周期函数中我们可以访问到vm身上所有的属性和方法
2、当前生命周期函数会将data和methods身上所有的属性和方法都挂载在vm的实例身上
3、当前生命周期函数会将data身上所有的属性添加一个getter/setter方法，因此如果需要进行
前后端数据交互的时候必须在当前生命周期中进行(响应式原理),如果数据没有提前在data中进行了绑定
那么这个属性身上就不会有getter/setter方法，因此数据也不会动态的进行改变

beforeMount

挂载前：
数据和模板还没有进行相结合，在这个生命周期函数中我们可以进行数据最后的修改

在当前生命周期函数中是访问不到真实的DOM结构

mounted:(*****)

挂载后：
数据和模板已经结合，在这个生命周期函数中我们可以通过this.$refs访问到真实DOM结构

$refs
ref&

最低0.47元/天 解锁文章
wenxin_liu
关注
Vue生命周期
laoli360的博客
09-28 207
人是有生命的,也是有周期这一个说法的婴儿 =>少年=>青年=>中年=>老年=>黄土 Vue也是有周期这一个说法的 它分为 创建=>挂载=>更新=>销毁 Vue - 钩子函数 Vue 框架内置函数，随着组件的生命周期阶段，自动执行 组件创建完毕后，可以在created 生命周期函数中发起Ajax 请求，从而初始化 data 数据 阶段 方法名 方法名 初始化 beforeCreate created 挂载 ..
vue那个生命周期函数操作dom_vue生命周期实例小结
weixin_31498721的博客
01-30 1404
本文实例分析了vue生命周期。分享给大家供大家参考，具体如下：每个Vue实例都存在完整的生命周期，经历从创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、销毁等一系列过程。如下图所示vue的完整生命周期可分为三个阶段：初始化阶段、运行阶段和销毁阶段。共存在很多钩子函数，他们在vue生命周期不同的阶段进行操作,列举如下：beforeCreatecreatedbeforeMountmounte...
vue组件生命周期详解
08-28
主要为大家详细介绍了vue组件生命周期，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
关于vue中生命周期的分析
weixin_34060741的博客
12-23 118
组件的生命周期 每一个组件或者实例都会经历一个完整的生命周期，总共分为三个阶段：初始化、运行中、销毁 生命周期图示 实例、组件通过new Vue() 创建出来之后会初始化事件和生命周期，然后就会执行beforeCreate钩子函数，这个时候，数据还没有挂载ね，只是一个空壳，无法访问到数据和真实的dom，一般不做操作 挂载数据，绑定事件等...
vue生命周期各阶段详情分析（子父组件执行顺序）
weixin_43456275的博客
04-25 409
vue生命周期 beforeCreate 实例初始化 this指向实例 不能访问 data computed watch methods上的方法和数据 created 实例创建完成可以访问 data computed watch methods的方法和数据 未挂载到DOM,不能访问到el属性和el属性和el属性和ref属性内容为空数组 beforeMount 在挂载开始之前被调用，会找...
vue生命周期图解
江理彭于晏的博客
09-28 384
vue生命周期共有8个函数 var app = new Vue({ el: '#app', data: { message: 'hello', value: '123', list: [] //[1,2,3,4] }, // template: ` // <div id="app" class="two"> // <h1>{{message}}.
vue生命周期分析
Web_boom的博客
06-27 126
每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，话不多说先看图：生命周期函数就是组件在初始化或者数据更新时会触发的钩子函数。在初始化时，会调用以下代码，生命周期就是通过 callHook 调用的 可以发现在以上代码中，beforeCreate 调用的时候，是获取不到 props 或者data 中的数据的，因为这些数据的初始化都在 initState 中
vue生命周期和react生命周期对比【推荐】
10-18
本文将深入探讨Vue和React的生命周期函数，并进行对比分析。 首先，Vue.js的生命周期可以分为八个阶段：创建前beforeCreate、创建created、载入前beforeMount、载入mounted、更新前beforeUpdate、更新***d、销毁前...
vue生命周期各阶段详情分析
01-20
下面是对Vue生命周期各阶段的详细分析： 1. **beforeCreate**：在这个阶段，Vue实例刚刚开始初始化，`this`上下文指向实例本身，但还不能访问到`data`、`computed`、`watch`以及`methods`上的方法和数据。此时进行...
vue生命周期与钩子函数简单示例
10-17
Vue的生命周期是指Vue实例从创建到销毁的一系列过程，而钩子函数是在Vue生命周期的各个阶段内部提供给开发者进行自定义处理的函数。了解和掌握Vue的生命周期及钩子函数对于构建高质量的Vue应用至关重要。 Vue实例的...
vue的生命周期,简单的分析一下
weixin_43353869的博客
05-26 247
在vue中的生命周期 vue的生命周期：从初始到销毁阶段 借用vue生命周期的图片 https://cn.vuejs.org/v2/guide/instance.html#%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E5%9B%BE%E7%A4%BA 生命周期三个阶段 第一阶段： beforeCreate created beforeMount mounted 第二阶段 beforeUpdate updated 第三阶段 beforeDestroy destroyed 注意点
vue 生命周期详细分析
hkduan的博客
04-18 315
new vue({}) 1.Init events&lifecycle //只有默认的一些生命周期和默认的事件，此时的data，methods，el等等都不存在，还没有初始 化数据 2.beforeCreate() //钩子函数运行，但是此时的vue是一个空壳。我们尝试使用beforeCreate函数输出data和methods中的数据是空的 初始化数据阶段 3.init injections&reactivity//在这个阶段已经初始化了数据和事件，包括data和methods，但是还.
vue生命周期解析
qq_44845659的博客
12-27 135
vue生命周期解析 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的生命周期图，从图上，我们再一步一步来理解vue生命周期 我们先简单的来解说这张图，然后再通过例子来详看 首先，从图上，我们可以看出，他的一个过程是 new Vue()实例化一个vue实例，然后init初始化
vue的生命周期详解
Erictezx的博客
12-22 394
1.什么是vue的生命周期： 简单理解 ：vue 实例从创建到销毁的过程就是 vue生命周期 2.vue的声明周期常见的主要分为4大阶段8大钩子函数 : 一阶段： 创建 前/后 （前） -beforeCreate 在生命周期函数执行的时候，data 和 method 还没有初始化 （后） -created 在生命周期函数执行的时候， data 和method 已经初始化完成 二阶段 ： 渲染 前/后 ...
浅谈vue生命周期函数
weixin_45266081的博客
08-24 122
以下主要从几个方面来讲： 1.vue的生命周期是什么 2.什么是vue生命周期函数 1.vue生命周期为vue组件的创建到结束，从一个组件创建、数据初始化、挂载、更新、销毁，这就是一个组件所谓的生命周期。 2什么是生命周期函数，指的是，在vue组件生成到消亡中vue所提供的每个阶段运行的函数 上图(原图来源vue官网) 总结：生命周期函数 组件刚开始创建 beforeCreate 组件在内存被创建好了created 组件在将要在页面被渲染的时候beforeMount 组件成...
beforeDestroy与destroyed的使用
seimeii的博客
07-29 2808
beforeDestroy与destroyed的使用
vue 生命周期4 销毁流程 beforeDestroy destroyed
热门推荐
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）（2022/7/17）
日常笔记 | 干货分享 | 毕设源码 | 毕设指导 | 答辩指导
07-17 2701
Vue学习之--------Vue生命周期beforeCreate、created、beforeMount、mounted、beforeDestroy 。。。（图解详细过程）
vue基础五：钩子函数(beforeCreate、created、beforeMount、mounted、beforeUpdate、updated、beforeDestroy、destroye)
白骨梦儿
11-30 2894
vm的生命周期函数1. 生命周期的定义2.钩子函数：beforeCreate、 created3.beforeMount、mounted4.beforeUpdate、updated5.beforeDestroy、destroyed 1. 生命周期的定义 <!-- 生命周期: 1.又名:生命周期回调函数、生命周期函数、生命周期钩子 2.是什么:Vue在关键时刻帮我们调用的一些特殊名称的函数 3.生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的 4.生命周期函数中的this指
vue与react生命周期对比分析
Vue 的生命周期是指一个 Vue 实例从创建到销毁的过程中的各个阶段，每个阶段都有特定的任务和可以进行的操作。Vue 的生命周期主要分为以下几个关键阶段： 1. **初始化**： - `beforeCreate`：在实例创建之前被调用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值