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

原创已于 2023-04-27 14:21:14 修改 · 650 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#javascript #前端

于 2023-03-16 17:44:47 首次发布

vue的一些使用技巧专栏收录该内容

30 篇文章

订阅专栏

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

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

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

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

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

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

小皮皮不皮

关注关注

0
点赞
踩
1

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

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，所以我们需要监听路由变化，当路由变为非