vue 生命周期里面的方法只走一次怎么办？

原创 已于 2023-04-27 14:21:14 修改 · 650 阅读 · 1 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#javascript #前端

于 2023-03-16 17:44:47 首次发布
文章探讨了在Vue项目中遇到的问题，即某些生命周期方法只在首次进入页面时执行。提到了mounted钩子只运行一次，而activated每次激活时都会执行。作者建议记录此解决方案，以备后续项目中类似问题的解决。

有时候在项目中会遇到只有第一次进入页面的时候生命周期里的方法会走，再次进来就不走了

不能每次遇到这个问题都用监听路由的处理，找了一下发现

mounted(){
    // 直走一次
},
activated(){
    // 每次都会走
}

所以记录一下方便后面再次出现这个问题，具体的可不可行还要看大家在实际项目中清况

Vue组件的生命周期怎么只执行一次
酸狗的博客
02-16 4906
vue组件的生命周期只执行一次？
超详细vue生命周期解析(详解)
热门推荐
weixin_42707287的博客
12-25 13万+
vue是每一个前端开发人员都绕不过的一个技术，在国内的市场占有量也是非常的大，我们大部分人用着vue, 却不知道他内部其实经历了一些什么。每个生命周期又是什么时候开始执行的。我们今天来详细的看一看 首先，生命周期是个啥？ 借用官网的一句话就是：每一个vue实例从创建到销毁的过程，就是这个vue实例的生命周期。在这个过程中，他经历了从开始创建、初始化数据、编译模板、挂载Dom、渲染→更新→渲染、卸载等一系列过程。那么这些过程中，具体vue做了些啥，我们今天来了解一下。 语述 了解之前，我们先贴上一张官网的.
vue解决父组件调用子组件只执行一次问题
前端泡面人
08-31 2698
vue解决父组件调用子组件只执行一次问题
【vue 提交】当用户在3秒之内连续点击一个按钮，事件函数只执行一次，vue中防止用户频繁点击按钮，重复 flag。 vue事件修饰符 .once 点击事件将只会触发一次
AAAXiaoApple的博客
04-23 3881
① 首先设置变量flag属性值为false,使得按钮可点击（disabled: true）② 当用户点击后，立即设置flag为false，事件逻辑return，不继续执行。③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态，flag为true。② 当用户点击后，立即设置按钮不可点击（disabled: false）① 首先设置变量flag属性值为true,使得点击事件可点击。③ 等待事件执行完或者相应的间隔时间后，恢复按钮为可点击状态。
vue 组件的生命周期怎么只执行一次_Vue单组件与父子组件的生命周期
weixin_36285392的博客
02-11 1339
单个组件的生命周期现根据实际代码执行情况分析：单组件更新{{dataVar}}销毁exportdefault{data(){return{dataVar:1}},beforeCreate(){this.compName='single'console.log(`--${this.compName}--beforeCreate`)},created(){console.log(`...
Vue 相同组件 生命周期只调用一次
xie3480469的博客
04-01 5771
Vue 相同组件 生命周期只调用一次 先来看一下官方文档的组件的介绍 因为组件是可复用的 Vue 实例，所以它们与 new Vue 接收相同的选项，例如 data、computed、watch、methods 以及生命周期钩子等。仅有的例外是像 el 这样根实例特有的选项 所以说每一个组件是一个单独的实例，但是为什么我写了多个相同的组件，但是 生命周期只调用一次呢？ 再来卡看key的官方文档 ...
【Vue.js生命周期】什么是生命周期？声明周期详解
qq_52499703的博客
08-10 1061
我们知道vue是一个构建数据驱动的 web 界面的渐进式框架，那么vue生命周期是什么呢？本篇文章就给大家来介绍一下vue生命周期的内容，希望可以帮助到有需要的朋友。
VUE的生命周期
慢慢
03-07 1394
生命周期的“钩子函数”，表示的是生命周期的某一时刻。
vue生命周期
2203_75749435的博客
04-01 264
在生命周期的每个阶段都会有一个相对应的函数会被触发，这个函数就是所谓的钩子函数。同时在这个组件从创建到销毁的过程中，会运行一些叫做生命周期钩子的函数，这为用户提供了一些在组件生命周期的不同阶段添加代码的机会。但是created相对于其他两个阶段更早触发，越早向后端请求接口，就可以越快拿到数据，用户就能更快的看到数据。对页面进行了某些操作，导致数据发生了变化，从而使虚拟dom发生了变化，就会进入调用这个方法。在这里你可以进行比对更新之前的值和更新之后的值的区别，做一些逻辑处理。
vue 生命周期 钩子函数 keep-alive activated deactivated
global_coding的博客
06-13 2029
vue 生命周期 钩子函数 keep-alive activated deactivated
vue 子组件/父组件的生命周期只被执行一次的问题及再次进入页面静态数据不会初始化的问题
树上骑个猴的博客
09-22 2869
1.试试activated的生命周期，如果每次进入页面都会触发该生命周期而不会触发其他生命周期，则说明使用了keep-alive <template> <section class="app-main"> <transition name="fade-transform" mode="out-in"> <keep-alive :include="cachedViews"> <router-view :key="ke
看一遍你就能学会，解决vue父组件调用子组件只执行一次方法问题
总结前端开发中遇到的问题，分享前端知识
03-06 1835
父组件调用子组件方法，居然方法只执行一次，这是什么情况？这个方法简单有效，相信你看一遍就能学会。
【Vue 学习】- VueJS 简单入门
2401_84411557的博客
05-01 463
2、MVVM 模式MVVM是Model-View-ViewModel的简写。它本质上就是MVC 的改进版。MVVM 就是将其中的View 的状态和行为 抽象化，让我们将视图 UI 和业务逻辑分开 MVVM模式和MVC模式一样，主要目的是分离视图（View）和模型（Model）Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM， 也就是 ViewModel。
vue 组件的生命周期怎么只执行一次_vue组件及子组件的生命周期
weixin_42513036的博客
01-17 1955
生命周期什么是生命周期？一个实例从创建到销毁的一个过程。vue初始化做了什么？创建vue实例后，调用init方法，做了以下事情：// 初始化生命周期//initLifecycle(vm)// 初始化事件中心initEvents(vm)// 初始化渲染initRender(vm)callHook(vm, 'beforeCreate')// 初始化注入initInjections(vm) // res...
Vue 解决mounted挂载函数只执行一次，做其他操作会丢失数据的问题
manxianglin的博客
10-28 6790
解决mounted挂载函数只执行一次，做其他操作会丢失数据的问题
vuejs进入页面只刷新一次
weixin_45682701的博客
10-15 2213
vuejs进入页面只刷新一次想要效果代码实现 想要效果 登录进入页面后自动刷新一次页面，不重复刷新。 代码实现 1.在login页面 登录成功时向sessionStorage赋值 sessionStorage.setItem('create',1) 2.进入到默认页面，在mouthed钩子函数中添加以下代码 if(sessionStorage.getItem('create')==1){ sessionStorage.removeItem('create')
学习vue源码（13）手写$nextTick
weixin_43964148的博客
06-10 271
1.概述nextTick接收一个回调函数作为参数，它的作用是将回调延迟到下次DOM更新周期之后执行。它与全局Vue.nextTick的原理时一样的。可能有同学对将回调延迟到下次DOM更新...
vue如何让一句代码只执行一次_javascript – 如何只触发一次vue方法,而不是每次都触发一次...
weixin_33745006的博客
01-17 2339
解决方式Vue方式：您可以使用$once,它只会监听一次事件.Listen for a custom event, but only once. The listener will be removed once it triggers for the first time.你只需要将@once添加到@change,如下所示：export default {//No Change here}检查演...
vue路由出口 二次进入页面组件 不执行created和mounted生命周期钩子
weixin_53877433的博客
07-27 3350
页面调用一次接口，第二次缓存之前的数据，没有渲染页面； 不会销毁再创建组件而是会复用组件，页面不会刷新。 解决： 方法一：实践成功 官方推荐的使用watch监听路由变化,组件中监听 注意：watch监听路由变化，我们的路由一定要有子路由，监听变化也紧局限在父子路由中，也就是我们这个路由一定要有子路由，在子路由跳转过程中会调用watch，能成功监听 watch: { $route(to) { if (to.path=='') { ... }
vue用了elementui的el-dialog，里面放了路由页面，为啥关闭dialog会运行一次页面的生命周期，怎么解决
最新发布
07-08
<think>我们正在处理一个关于Vue和Element UI中el-dialog组件的问题。用户发现当el-dialog中嵌套了一个路由页面（即通过路由加载的组件）时，关闭dialog会触发该路由页面的生命周期钩子（如destroyed）。用户想知道为什么会发生这种情况以及如何解决。 分析原因： 在Vue中，组件的生命周期钩子会在组件被销毁时触发。当el-dialog关闭时，如果它内部嵌套的组件被销毁，那么这些组件的生命周期钩子（如beforeDestroy和destroyed）就会被触发。 但是，这里有一个特殊情况：用户嵌套的是一个路由页面。这意味着在dialog内部使用了<router-view>来渲染一个路由对应的组件。当dialog关闭时，这个<router-view>会被移除，从而导致路由组件被销毁，因此触发了它的销毁生命周期钩子。 然而，用户可能期望的是：当dialog关闭时，这个路由组件不被销毁，以便在下次打开dialog时能够保持之前的状态（例如表单输入的内容等）。这就是问题所在。 解决方案： 1. 使用v-if控制路由组件的挂载与销毁：默认情况下，当dialog关闭时，我们可能希望保留路由组件的状态，但又不希望它被销毁。我们可以通过将路由组件包裹在一个<keep-alive>组件中来实现缓存。但是，请注意，<keep-alive>只能缓存组件实例，而不会缓存路由。因此，我们需要在路由配置中设置组件的缓存，或者使用<keep-alive>包裹<router-view>。 2. 另一种方法是，在dialog关闭时，我们并不销毁整个路由视图，而是通过v-show来控制dialog的显示隐藏，这样内部的组件就不会被销毁。但是，el-dialog组件默认情况下在关闭时并不会销毁其内容（除非设置destroy-on-close属性），所以我们需要检查是否设置了销毁属性。 3. 然而，根据Element UI的文档，el-dialog有一个属性`destroy-on-close`，默认为false，即关闭时不会销毁子组件。所以，如果用户没有设置这个属性为true，那么关闭dialog时子组件并不会被销毁。那么为什么路由组件会被销毁呢？可能是因为路由发生了变化，或者因为dialog关闭时导致<router-view>被移除，从而销毁了路由组件。 因此，我们需要确保在dialog关闭时，路由组件不会被销毁。有几种方法： 方法一：使用v-if控制路由组件的加载，但这样每次打开dialog都会重新加载组件（即重新创建），如果用户希望保持状态，则不可取。 方法二：使用<keep-alive>来缓存路由组件。这样即使dialog关闭，路由组件也不会被销毁，而是被缓存起来，下次打开时状态得以保留。 具体步骤： 在App.vue（或包含<router-view>的父组件）中，用<keep-alive>包裹<router-view>，但这样会缓存所有路由。我们可能只希望缓存dialog中的那个路由。 方法三：在dialog内部使用<keep-alive>包裹<router-view>。但是，由于<router-view>是动态组件，我们可以这样写： ```html <el-dialog :visible.sync="dialogVisible"> <keep-alive> <router-view v-if="dialogVisible"></router-view> </keep-alive> </el-dialog> ``` 但是，注意：当dialogVisible为false时，<router-view>会被销毁，即使包裹了<keep-alive>，因为v-if是条件渲染，当条件为false时组件会被销毁。而<keep-alive>只能缓存它包裹的组件，当组件被销毁时，缓存也就没有了。 因此，我们需要让<router-view>在dialog关闭时不被销毁，我们可以使用v-show来控制，但是<router-view>不支持v-show（因为v-show只是切换display样式，而路由组件在隐藏时可能仍然需要保持活动状态）。所以，我们可以将<router-view>包裹在一个div中，然后对这个div使用v-show，但是这样并不能阻止路由组件的销毁，因为路由组件的销毁是由路由变化或者父组件的卸载引起的。 方法四：我们可以在dialog关闭时，不卸载路由组件，而是将其隐藏。但是，el-dialog在关闭时默认会移除其内部的内容（通过v-if），所以我们需要改变el-dialog的行为，使其在关闭时只是隐藏而不销毁内容。我们可以通过设置`destroy-on-close`为false（默认就是false）来避免销毁。同时，我们需要确保路由不会因为dialog的关闭而改变。也就是说，即使dialog关闭了，当前的路由仍然保持。这样，路由组件就不会被销毁。 但是，用户可能希望关闭dialog时路由也改变？这需要根据业务需求来定。 因此，我们有两种思路： 思路1：在关闭dialog时，不改变当前路由。这样，路由组件就不会被销毁。但是，这样会导致即使dialog关闭了，路由仍然保持，可能会影响其他功能（比如浏览器回退操作）。 思路2：在关闭dialog时，改变路由，但我们使用<keep-alive>缓存该路由组件，这样即使路由组件被销毁，再次打开时（路由再次激活）可以从缓存中恢复。 具体实现： 1. 在路由配置中，为需要缓存的路由组件设置meta属性，比如keepAlive: true。 2. 在包含<router-view>的地方，根据路由的meta属性决定是否使用<keep-alive>： ```html <keep-alive> <router-view v-if="$route.meta.keepAlive"></router-view> </keep-alive> <router-view v-if="!$route.meta.keepAlive"></router-view> ``` 3. 在dialog关闭时，我们可能需要改变路由，比如跳转到一个空路由或者回到之前的页面？但是用户可能希望下次打开dialog时还能看到之前的状态。所以，我们需要在关闭dialog时不要改变路由？或者改变路由但是保留组件的缓存。 然而，在dialog中嵌套路由页面，这种做法本身可能不太符合常规。因为路由通常用于整个页面的切换，而dialog是页面内的一个弹出层。所以，另一种做法是：不要使用路由来加载dialog的内容，而是使用组件的方式直接引入，然后通过v-if来控制组件的显示（这样我们可以通过<keep-alive>包裹这个组件来缓存）。这样，关闭dialog时，我们只是隐藏这个组件，并不会销毁它（如果使用<keep-alive>）。 所以，如果可能，建议避免在dialog内使用<router-view>，而是将需要展示的组件直接引入，并用<keep-alive>包裹。 但是，如果用户确实需要在dialog内使用路由，那么我们可以采用以下方式： 在父组件中： ```html <el-dialog :visible.sync="dialogVisible" :destroy-on-close="false"> <keep-alive> <router-view v-if="dialogVisible"></router-view> </keep-alive> </el-dialog> ``` 注意：这里设置`destroy-on-close`为false（其实默认就是false），这样dialog关闭时不会销毁内部组件。同时，我们使用v-if来控制<router-view>的显示，当dialogVisible为true时才渲染<router-view>，这样当dialog关闭时，<router-view>会被销毁，但是因为包裹在<keep-alive>中，所以组件实例会被缓存。下次打开dialog时，会从缓存中恢复。 但是，这里有一个问题：当dialog关闭时，<router-view>被销毁（因为v-if为false），那么路由组件确实会被销毁，但是<keep-alive>会保存它的实例。当下次再次渲染时，会从缓存中取出实例，不会重新创建（所以不会触发created、mounted等生命周期，但是会触发activated钩子）。 然而，我们还需要考虑路由的变化。当dialog关闭时，我们可能希望路由回到之前的状态？或者保持不变？这需要根据业务逻辑来调整。 另外，注意：当<router-view>被销毁时，它内部的路由组件也会被销毁，但是因为有<keep-alive>，所以路由组件的实例会被缓存，所以不会触发destroyed钩子，而是触发deactivated钩子。当再次打开dialog时，会触发activated钩子。 但是，用户观察到的生命周期钩子触发，可能是destroyed钩子被触发，说明组件被销毁了。所以，如果我们使用<keep-alive>，那么destroyed钩子就不会在关闭dialog时触发，而是在缓存被清除时才会触发。 因此，解决方案总结： 1. 使用<keep-alive>包裹<router-view>，并确保在dialog关闭时，路由组件不会被销毁（通过设置destroy-on-close为false，并且使用v-if来控制<router-view>的渲染，这样关闭dialog时<router-view>被销毁，但路由组件实例被缓存）。 2. 这样，关闭dialog时，路由组件会触发deactivated钩子，而不会触发destroyed钩子。打开dialog时，会触发activated钩子。 但是，如果用户希望关闭dialog时路由也改变（比如返回上一级），那么我们需要在关闭dialog时手动改变路由。这样，路由改变会导致原来的路由组件被销毁（即使有<keep-alive>，如果路由变化，那么该路由组件也会被移除缓存？）。所以，我们需要在关闭dialog时保持当前路由不变？这可能会造成URL和实际显示不一致。 因此，在dialog中使用路由可能并不是最佳实践。我们可能需要重新考虑设计：使用普通组件而不是路由组件。 如果用户坚持使用路由，那么需要权衡：在关闭dialog时是否改变路由。如果不改变路由，那么URL会保持，用户可能觉得奇怪。如果改变路由，那么路由组件会被销毁（即使缓存了，但路由变化后，该组件实例会被从缓存中移除？）。 实际上，<keep-alive>缓存的是组件实例，它根据组件的name或者路由的匹配规则来缓存。当路由变化时，如果新路由匹配到同一个组件，并且我们使用了<keep-alive>的include属性来指定缓存，那么原来的组件实例会被缓存。但是，如果路由变化到了不同的组件，那么原来的组件实例会被销毁。 所以，如果我们在关闭dialog时改变路由（比如跳转到另一个路由），那么当前路由组件会被销毁（缓存也会被清除）。如果我们在关闭dialog时不改变路由，那么路由组件会一直存在，直到路由改变。 因此，我们可以在关闭dialog时保留当前路由，然后当用户再次打开dialog时，由于路由没有变化，所以组件可以直接从缓存中激活（不会触发created和mounted）。这样，关闭dialog时，组件只是被停用（deactivated），不会被销毁。 具体操作： 1. 打开dialog时，通过路由跳转到dialog对应的路由（比如/dialog-page）。 2. 关闭dialog时，我们并不跳转路由，而是将dialog隐藏。这样，路由仍然是/dialog-page，但是dialog不可见。这显然不是我们想要的，因为URL会一直显示/dialog-page。 所以，我们需要在关闭dialog时，将路由跳转回之前的路由。但是这样，路由变化会导致/dialog-page对应的组件被销毁（即使有缓存，因为路由已经离开了，所以组件实例会被销毁？）。实际上，<keep-alive>可以缓存多个路由，只要路由组件的name在include列表中，那么该组件实例就会被缓存。当路由再次回到/dialog-page时，会从缓存中激活。 因此，我们可以这样做： 1. 在打开dialog时，使用$router.push()跳转到dialog对应的路由（比如/dialog-page）。 2. 在关闭dialog时，使用$router.go(-1)返回上一级路由（或者使用$router.push()跳转回之前的路由）。 这样，路由变化会触发/dialog-page路由组件的停用（deactivated），并被缓存。当再次打开dialog（再次跳转到/dialog-page）时，组件激活（activated），不会重新创建。 但是，用户可能会通过浏览器的后退按钮关闭dialog，所以我们需要监听路由变化，当路由变为非
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值