Javascript 只在组件Vue.js上运行一次mounted（）

我有两个组件可以有条件地使用

v-if

进行渲染：

<Element v-if="this.mode === 'mode'"/>
<OtherElement v-if="this.mode !== 'mode'"/>

---

我在

mounted（）

下加载了两个组件的动画，我只想在第一次加载它们时运行它们。但是，使用mounted，每当

此.mode

更改时重新创建组件时，动画将再次触发。如何避免这种情况？

如果created（）不起作用，您应该尝试在父元素中做一个简单的检查，检查this.mode是否在之前打开和关闭，将结果保存为变量并将其传递给挂载的挂钩，并且仅在模式未在之前切换的情况下运行动画。

使用

v-If

，每当

this.mode

更改时，重新呈现组件。Vue将它们存储在虚拟DOM中，但如果使用

v-if

，则会重新渲染它们

如果您可以访问这些组件的代码，请考虑使用<代码> PROP>代码> <代码> V-Studio并观看它，可选地与 EXIT <代码>组合，这样您就可以在父组件和子组件之间进行通信，并且如果子组件加载动画最初需要在子组件和父组件中设置标记，则设置标记。以避免再次加载

这将是子组件之一：

<template>
    <div v-show="mode === 'themode'">

    </div>
</template>
<script>


    export default {
        props: {
            mode: {
                type: Boolean,
                required: true,
                twoWay: true
            },
        },
        data()  {
            return {
                animationLoaded : false,
            }
        },
        mounted(){



        },
         watch: {
           'mode' : function(){
            if(this.mode === 'mode' && this.animationLoaded === false){
                //load animation and set flag to true, to avoid loading it again. 
                this.animationLoaded = true; 
                this.$root.$emit('component-name:animation-loaded');
            }
          }
        },

导出默认值{
道具：{
模式：{
类型：布尔型，
要求：正确，
双向：对
},
},
数据（）{
返回{
animationLoaded:false，
}
},
安装的（）{
},
观察：{
“模式”：函数（）{
if（this.mode=='mode'&&this.animationLoaded===false）{
//加载动画并将flag设置为true，以避免再次加载动画。
this.animationLoaded=true；
这是.$root.$emit（'component-name:animation-loaded'）；
}
}
},

并将子组件放入父组件中：

  <child-component :mode.sync="mode"></child-component>

---

您可以将组件包装在

保持活动的
元素中

<keep-alive>
    <Element v-if="this.mode === 'mode'"/>
    <OtherElement v-else />
</keep-alive>

我有一个类似的问题，我只想在我的
挂载的
中的某个东西在页面加载时运行，但是当我离开（使用vue路由器）并再次返回时，
挂载的
每次都会运行，重新运行该代码。解决方案：我放置一个
窗口。addEventListener（'load'，（）=>{}）
中创建的
函数，该函数将运行该代码

创建的
created
函数在vue引导过程的早期运行，而
window.load
事件是页面加载队列中的最后一个事件。由于vue作为单个页面应用程序运行，因此
window.load
事件只会触发一次，并且只有在所有javascript（包括vue）都启动并运行之后才会触发（在某种意义上）我可以在我的环境中来回路由，因为我知道初始构建脚本只有在页面实际重新加载时才会运行

我觉得有一种更有效的方法可以做到这一点，或者我错过了vue terans可能会责骂我的东西，但在这一点上，vue打了我很多次手腕，我再也不想尝试了。这是一种很难解决的方法！
你能访问和编辑这些组件吗？