vue组件生命周期

最新推荐文章于 2024-05-03 11:08:18 发布
最新推荐文章于 2024-05-03 11:08:18 发布
阅读量759 收藏
点赞数
分类专栏： Vue and ElementUI 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43667537/article/details/123883465
版权

一、总览

在这里插入图片描述
在这里插入图片描述
组将创建阶段 周期函数只会执行一次
mouted就是渲染的意思
vue项目的运行是从main.js开始的，mainjs（入口文件）是由webpack打包和编译的，webpack发现mainjs嵌套用到了App.vue（根组件）,又发现打包嵌套用到了其他组件.webpack打包完成之后，会生成两个js文件，这两个文件会放到浏览器中解析执行
在这里插入图片描述
在这里插入图片描述

二、beforeCreated

这个阶段不重要，什么都干不了

三、created(这个阶段html模板还没有渲染成功,不能操作DOM)

这个阶段，可以发起axios请求去拿数据
在这里插入图片描述

四、beforeMounted和mounted

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
这个圈，阶段渲染html结构
在这里插入图片描述
beforeMount也是无关紧要的，操作DOM元素最早在Mounted

五、组件执行阶段(这个阶段可以执行多次)

beforeUpdate这个阶段数据已经是新的了，但是UI结构还是旧的
当数据变化之后，为了能够操作最新的DOM结构，必须写到updated生命周期函数中

六、组件销毁阶段

七、总结

重要：①created 可以对props、methods、data进行操作
②mounted 可以操作DOM结构
③updated 可以操作最新的DOM结构

Faith_gyz
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
vue组件生命周期详解
01-19
本文实例为大家分享了vue组件生命周期的具体代码，供大家参考，具体内容如下 分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: beforeMount mounted 和挂载相关的处理 update: beforeUpdate updated 根据要更新的数据 做逻辑判断 destroy:beforeDestroy destroyed 清理工作 代码： <!doctype html> <html> <head> <meta cha
Vue组件生命周期运行原理解析
01-21
Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前 ) 在实例初始化之后，数据观测和事件配置之前被调用，此时组件的选项对象还未创建，el 和 data 并未初始化，因此无法访问methods， data， computed等上的方法和数据。 created ( 创建后 ） 实例已经创建完成之后被调用，在这一步，实例已完成以下配置：数据观测、属性和方法的运算，watch/event事件回调，完成了data 数据的初始化
Vue 相同组件 生命周期只调用一次
xie3480469的博客
04-01 5443
Vue 相同组件 生命周期只调用一次 先来看一下官方文档的组件的介绍 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项 所以说每一个组件是一个单独的实例，但是为什么我写了多个相同的组件，但是 生命周期只调用一次呢？ 再来卡看key的官方文档 ...
vue 组件的生命周期怎么只执行一次_Vue单组件与父子组件的生命周期
weixin_36285392的博客
02-11 1170
单个组件的生命周期现根据实际代码执行情况分析：单组件更新{{dataVar}}销毁exportdefault{data(){return{dataVar:1}},beforeCreate(){this.compName='single'console.log(`--${this.compName}--beforeCreate`)},created(){console.log(`...
Vue3版本生命周期详解
暗武逢天的博客
06-26 697
其实我们通过vue.js框架来开发页面的时候，每一个页面并是不我们所想的那样，通过终端npm run serve运行成功后，在点击链接然后就可以看到所书写的页面了。其实每一个展示在用户视野中的页面都大致经过了如下四个过程，创建 - 挂在 - 更新 - 销毁(卸载)。每一个过程中所执行的相关流程各不相同，就如同人的生老病死一样，销毁后的组件就无法访问。这就是生命周期
vue生命周期
热门推荐
zhangvalue的博客
09-28 8万+
随着对 vue 的不断了解，会越来越发现它生命周期的重要性，只有了解了它的生命周期，才能在开发项目的时候在逻辑上的很好的判断什么时候该发生什么事件，即很好的控制页面。 一、什么是 vue 生命周期 Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。下面这个照片是官网中的生命周期照片 二、生命周期函数 Vue 的生命周期总共分为8个阶段：创建前/后，载入前/后，更新前/后，销毁前
vue生命周期探究（一）
weixin_34034670的博客
03-29 135
vue官方文档---实例生命周期vue-router2.3版文档---路由勾子vue官方文档---指令及其绑定周期 前言 在使用vue开发的过程中，我们经常会接触到生命周期的问题。那么你知道，一个标准的工程项目中，会有多少个生命周期勾子吗？让我们来一起来盘点一下： 根组件实例：8个 (beforeCreate、created、befor...
vue 组件的生命周期怎么只执行一次_vue组件及子组件的生命周期
weixin_42513036的博客
01-17 1738
生命周期什么是生命周期？一个实例从创建到销毁的一个过程。vue初始化做了什么？创建vue实例后，调用init方法，做了以下事情：// 初始化生命周期//initLifecycle(vm)// 初始化事件中心initEvents(vm)// 初始化渲染initRender(vm)callHook(vm, 'beforeCreate')// 初始化注入initInjections(vm) // res...
vue3框架中的生命周期
weixin_43534452的博客
07-07 311
vue3中的生命周期
vue3 生命周期
cjj123580的博客
07-05 242
1、setup() : 开始创建组件之前，在 beforeCreate 和 created 之前执行，创建的是 data 和 method。2、onBeforeMount() : 组件挂载到节点上之前执行的函数；6、onBeforeUnmount(): 组件卸载之前执行的函数；4、onBeforeUpdate(): 组件更新之前执行的函数；7、onUnmounted(): 组件卸载完成后执行的函数；3、onMounted() : 组件挂载完成后执行的函数；一、Vue3中的生命周期。
Vue父组件监听子组件生命周期
10-14
主要介绍了Vue父组件监听子组件生命周期,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下
深入理解Vue父子组件生命周期执行顺序及钩子函数
10-18
本文通过实例代码给大家介绍了Vue父子组件生命周期执行顺序及钩子函数的相关知识，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
Vue组件的生命周期怎么只执行一次
酸狗的博客
02-16 4588
vue组件的生命周期只执行一次？
【vue】vue用了keep-alive生命周期只执行一次怎么办？
qq_39576711的博客
03-01 826
activated和deactivated也是生命周期，是专门为了使用了keep-alive的组件准备的，activated每次组件出现都会调用，deactivated每次组件离开都会调用。 实例： activated(){ this.loadInfo();//每次进入组件都获取一遍详情 }, deactivated(){ this.dialogVisible = false;//弹窗未关闭，意外离开组件时，触发关闭弹窗动作 }, 上一篇：vue子组件修改父组件数据，不使用v-model的
【前端学习 - Vue (3) 生命周期】
weixin_60364883的博客
09-05 3727
生命周期
【vue 提交】当用户在3秒之内连续点击一个按钮，事件函数只执行一次，vue中防止用户频繁点击按钮，重复 flag。 vue事件修饰符 .once 点击事件将只会触发一次
AAAXiaoApple的博客
04-23 2957
① 首先设置变量flag属性值为false,使得按钮可点击（disabled: true）② 当用户点击后，立即设置flag为false，事件逻辑return，不继续执行。③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态，flag为true。② 当用户点击后，立即设置按钮不可点击（disabled: false）① 首先设置变量flag属性值为true,使得点击事件可点击。③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态。
vue 组件的生命周期怎么只执行一次_五分钟简述Vue生命周期
weixin_30198949的博客
02-11 1247
文字简述：beforeCreated：什么都没有。created：vue对象实例初始化完成，完成数据(data，methods，computed)的初始化。可以访问data， compued，watch，methods上的方法和数据。使用场景：初始化完成时事件可以写在这里，少量的异步请求也可以在这里调用(请求不宜过多，避免白屏时间太长)beforeMounted：dom元素还不能得到，但vue挂载...
vue mounted 只执行一次_【入门必知】Vue生命周期详解
weixin_39994461的博客
12-12 4091
点击蓝字关注我们前言1什么是vue生命周期？ Vue 实例从创建到销毁的过程，就是生命周期。也就是从开始创建、初始化数据、编译模板、挂载Dom→渲染、更新→渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。2vue生命周期的作用是什么？ 让我们在控制整个Vue实例的过程时更容易形成好的逻辑。3vue生命周期总共有几个阶段？ 它可以总共分为8个阶段：创建前/后...
vue快速入门（五十）重定向
最新发布
不起眼小菜菜的博客
05-03 433
注释很详细，直接上代码……
vue 组件生命周期
09-01
Vue 组件的生命周期是指一个组件从创建到销毁的整个阶段。Vue 框架提供了一系列内置的生命周期函数，这些函数会按照特定的顺序自动执行。组件的生命周期函数可以分为三类：创建阶段、运行阶段和销毁阶段。 在创建阶段，组件会按照以下顺序执行一系列生命周期函数： - beforeCreate：在实例初始化之后，数据观测 (data observer) 和 event/watcher 事件配置之前被调用。 - created：在实例创建完成后被调用。此时实例已经完成以下的配置：数据观测 (data observer)，property 和方法的运算，watch/event 事件回调。然而，挂载阶段还没开始，$el 属性目前不可见。 - beforeMount：在挂载开始之前被调用：相关的 render 函数首次被调用。 - mounted：el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子。 在运行阶段，组件会执行以下生命周期函数： - beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。可以在该钩子中对更新之前的状态进行额外的操作。 - updated：由于数据更改导致虚拟 DOM 重新渲染和打补丁后调用。调用时，组件 DOM 已经更新，所以你现在可以执行依赖于 DOM 的操作。 在销毁阶段，组件会执行以下生命周期函数： - beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。 - destroyed：Vue 实例销毁后调用。此时，Vue 实例的所有指令都已解绑，所有的事件监听器都已移除，所有的子实例也都被销毁。 这些生命周期函数的执行顺序构成了 Vue 组件的完整生命周期。在不同的生命周期函数中，我们可以执行一些特定的操作，例如初始化数据、获取远程数据、处理事件等。 <span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* *2* [Vue组件的生命周期](https://blog.csdn.net/m0_61612505/article/details/124318968)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] - *3* [Vue----组件的生命周期](https://blog.csdn.net/m0_53022813/article/details/124411563)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"] [ .reference_list ]

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值