vue组件的生命周期

最新推荐文章于 2024-02-02 11:57:23 发布
最新推荐文章于 2024-02-02 11:57:23 发布
阅读量672 收藏 1
点赞数
分类专栏： vue 文章标签： vue组件的生命周期
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/kangswx/article/details/103340589
版权
  1. 在使用Vue的过程中需要频繁的创建和销毁组件
    • 比如页面部分内容的显示与隐藏，但是用的是v-if
  2. 可以使用组件缓存来缓存页面上的组件，防止频繁的创建和销毁组件
    • 内置组件中
    • 被其包裹的组件，在v-if=false的时候，不会销毁，而是停用
    • v-if=true不会创建，而是激活
    • 避免频繁创建组件对象对性能的损耗
    • 组件的激活和停用activated和deactivated
  3. 组件创建
    1. 组件创建前beforeCreate
    2. 组件创建后,数据已经挂载完成created
  4. DOM挂载
    1. DOM挂载前(Vue模板未渲染)beforeMount
    2. DOM挂载后(Vue模板渲染完成)Mounted
  5. 数据更新
    1. 数据更新前beforeUpdate
    2. 数据更新后updated
  6. 数据销毁
    1. 销毁前 beforeDestroy
    2. 销毁后 destroyed
  7. 新能调优：频繁创建销毁组件使用内置组件
kangswx
关注
专栏目录
Vue--》详解Vue组件生命周期的三个阶段
ztK63LrD的博客
11-18 3237
生命周期：1）又称：生命周期回调函数、生命周期函数、生命周期钩子。2）含义：vue在关键时刻帮助我们调用一些特殊名称的函数。3）生命周期函数的名字不可更改，但函数的具体内容是程序员根据需求编写的。4）生命周期函数中的this指向是 vm 或 组件实例对象。常用的生命周期钩子：1）mounted：发送ajax请求、启动定时器、绑定自定义事件、订阅消息等(初始化操作)2）beforeDestroy：清除定时器、绑定自定义事件、取消订阅消息等(收尾工作)
Vue组件生命周期
weixin_45958109的博客
09-22 488
Vue.js 文章目录Vue.js组件生命周期创建阶段beforeCreate()created()挂载阶段beforeMount()mounted()更新阶段beforeUpdate()updated()卸载阶段beforeDestroy()destroyed()errorCaptured()ref 与 $refsref$refsnextTick [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kobpkweF-1600773457397)(assets/lifecycle.
vue的组件生命周期
qq_38698753的博客
08-02 132
var MyComponent = Vue.extend({ template: '<div>我是 vue 的组件实例，有看到吗？</div>', init: function() { console.log('生命周期 init，在实例开始初始化时同步调用。此时数据观测、事件和 watcher 都尚未初始化。'); }, c...
vue组件生命周期
weixin_44260504的博客
04-26 454
vue组件生命周期 需要频繁的创建和销毁组件 比如页面中部分内容显示与隐藏，但是用的是v-if 组件缓存 内置组件中 被其包裹的组件，在v-if=false的时候，不会销毁，而是停用 v-if=“true” 不会创建,而是激活 避免频繁创建组件对象的性能损耗 成对比较 created 和 beforeCreate A 可以操作数据 B 数据没有初始化 mounted 和 be...
Vue组件的生命周详解
最新发布
qq_44741577的博客
02-02 1016
使用 keep-alive 就不会调用 beforeDestroy(组件销毁前钩子)和 destroyed(组件销毁)，因为组件没被销毁，被缓存起来了,这个钩子可以看作 beforeDestroy 的替代。在组件第一次渲染时会被调用（created/mounted也会被调用），之后在每次缓存组件被激活时调用。keep-alive是Vue内置的一个组件，可以使被包含的组件保留状态，或避免重新渲染。生命周期强调的是时间段，生命周期函数强调的是时间点。在被 keep-alive 包裹的。
VUE生命周期函数
Cool_so_cool的博客
04-05 1175
vue生命周期(钩子函数） 生命周期： Vue是一个构造函数，当执行执行这个函数时，相当于初始化vue实例；在创建实例过程中，需要设置数据监听，编译模板，将实例挂载到DOM上，数据更新能够让DOM也更新，在这个初始化，又会不同阶段默认调用一些函数执行，这些函数就是生命周期的钩子函数； 生命周期钩子函数，让够让咱们在初始化实例时，添加自己的代码； 生命周期的钩子函数中的this，会默认指向vue的实...
vue组件生命周期详解
01-19
本文实例为大家分享了vue组件生命周期的具体代码，供大家参考，具体内容如下 分为4个阶段： create/mount/update/destroy 每一个阶段都对应着有自己的处理函数 create: beforeCreate created 初始化 mount: ...
Vue组件生命周期运行原理解析
01-21
Vue实例有一个完整的生命周期，从开始创建、初始化数据、编译模板、挂在DOM、渲染-更新-渲染、卸载等一系列过程，我们成为Vue 实例的生命周期，钩子就是在某个阶段给你一个做某些处理的机会。 beforeCreate( 创建前...
Vue组件的生命周期
weixin_70443954的博客
12-05 1905
Vue组件的生命周期、生命周期函数
Vue的生命周期的详解
weixin_51225684的博客
10-19 798
这里讲的el是真实的el。在真实的el之前存在前，在beforeMount中的其实是页面中的#app，是挂载的目标。在这里跟vue图示有出入，vue图示中说明在beforeUpdate阶段，只有data中的数据改变，而试图的还未更新，视图中还是旧的数据，但在示例中，beforeUpdate钩子函数打印el可看出试图中的数据已更新。这实例创建期间的最后一个生命周期函数，当执行完 mounted 就表示，实例已经被完全创建好了，此时，如果没有其它操作的话，这个实例，就静静的躺在我们的内存中，一动不动。
解决Vue中的生命周期beforeDestory不触发的问题
11-20
分享一句很有用的经验： 给router-view加了个keep-alive导致组件缓存了，所以不会触发beforeDestory和destoryed 结束！ 补充知识：vuex actions正确使用vue-resource的方式( Error in mounted hook: “TypeError: Cannot read property ‘get’ of u) 场景 . SPA中 使用vuex初始化一项数据,在vuex的actions中需要使用vue-resource 使用的方式是 actions : { setTaskList : function (store) { let
Vue组件的生命周期及属性
XUYIGE的博客
04-04 254
一、 生命周期 生命周期的三个阶段：初始化显示、更新显示、死亡 每一个阶段都会对应一些生命周期的回调函数（钩子函数） 八个钩子函数对应组件的生命周期： beforeCreate(){} 该组件初始化之前 执行的钩子函数 created(){} 该组件初始化完成之后 beforeMount(){} 该组件挂载之前 mounted(){} 该组件挂载完成 beforeUpdate(){} 该组件...
vue生命周期beforeDestroy销毁失败removeEventListener
三七_z
03-01 690
vue生命周期
vue组件使用生命周期不执行的方法
早晚的博客
06-01 399
使用$ref的方法获取组件的ref，然后调用子组件的方法
vue 生命周期4 销毁流程 beforeDestroy destroyed
热门推荐
MCCLS的博客
07-19 1万+
销毁流程： 当调用了vm.$destroy 则触发销毁流程 验证下： 加一个按钮和销毁事件 效果： 发现点击了vm销毁,但是页面上仍不变 因为虽然vm没了但是vm的工作成果还是在的 并不是vm销毁后,它的生成的dom也销毁掉,只不过是没有人帮你去管理了 再点加1就发现不好用了 发现vue的开发者工具上也没有了任何东西了 验证：指令也不奏效 点击n加1发现页面都不变了说明指令也不奏效了 验证事件监听器也不奏效了 ...
Vue中keep-alive 缓存desroyed()不能执行解决办法
Sun~Neo
04-12 869
父组件：使用<keep-alive>， <keep-alive exclude=""> <router-view @public_footer="public_footer"></router-view> </keep-alive> <app-footer v-if="isFooter"></app...
vue 页面回退mounted函数不执行的问题及解决方法
weixin_30530339的博客
08-28 4291
前言 最近做项目碰到一个很头大的问题--从a页面跳到b页面进行编辑，编辑完再返回a页面，却没走a页面的钩子函数mounted，数据没有更新 经过一番面向百度研究，终于找到了问题所在。接下来就记录一下这个问题及其解决的方法。 原理 其实这个问题主要涉及到vue生命周期，对vue生命周期理解不够深刻的同学可以去官网学习一下：https://vuejs.org/v2/api/#O...
vue中页面使用缓存后destroyed失效，如何关闭定时器
蓝胖子的博客
10-11 2241
遇到的问题 页面中使用了定时器，关闭页面在destroyed中清除定时器，但destroyed没有生效。 关闭定时器 vue项目中，正常情况下，我们在生命周期 destroyed 中关闭即可，一旦页面中使用了keep-alive 进行缓存，此时 destroyed 会失效。需要在 deactivated 钩子函数去关闭，他是 keep-alive 特有的钩子函数。 代码 没有缓存页面： timer：在data中定义 --》用来接收定时器的 destroyed(){ clearInterval(this.t
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 ]
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值