Question

我有两个组件有条件地使用v-if进行渲染：

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

我在mounted()下拥有两个组件的加载动画，我只想在加载它们时先运行。但是在挂载后，this.mode更改时每次重新创建组件时，动画都会再次触发。如何避免这种情况？

Answer 1

您可以将组件包装在keep-alive元素中..

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

Answer 2

使用v-if，每次this.mode更改时都重新渲染组件。 Vue将它们存储在虚拟DOM中，但是如果您使用v-if，请重新渲染它们。

如果您有权访问这些组件的代码，请考虑将prop用于v-show并观看，并与emit结合使用，以便您可以在父组件和子组件之间进行通信，并且如果在子组件中需要它，则在子组件中设置标志；如果子组件最初加载动画，则在父组件中设置标志，以避免再次重新加载动画。

这将是子组件之一：

<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');
            }
          }
        },

...

并将子级置于父级组件中：

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

Answer 3

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

Answer 4

我遇到了类似的问题，我只希望mounted中的某个内容在页面加载时运行，但是当我导航（使用vue路由器）并再次返回时，mounted将每次运行，然后重新运行该代码。解决方案：我在window.addEventListener('load', () => {})函数中放入了created，该函数改为运行该代码。

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

我感觉有一种更安全的方式来执行此操作，否则我会错过一些被vue-terans责备的东西，但是在这一点上，vue使我在手腕上拍了太多次了我去麻烦了。 hacky解决方法！

mount（）仅在组件Vue.js上运行一次

4 个答案: