mount() 仅在组件 Vue.js 上运行一次

Posted 2023-02-23

【中文标题】mount() 仅在组件 Vue.js 上运行一次

【英文标题】：Having mounted() only run once on a component Vue.js

【发布时间】：2019-07-16 21:30:31

【问题描述】：

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

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

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

【问题讨论】：

您可以访问和编辑这些组件吗？

【参考方案1】：

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

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

【参考方案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>

【参考方案3】：

如果 created() 没有完成这项工作，你应该尝试在父元素中做一个简单的检查，如果 this.mode 之前打开和关闭，将结果保存为变量并将其传递给挂载的钩子并且仅在之前未切换模式的情况下运行动画。

【参考方案4】：

我遇到了类似的问题，我只希望我的 mounted 中的某些内容在页面加载时运行，但是当我离开（使用 vue 路由器）并再次返回时，mounted 每次都会运行，重新运行那个代码。解决方案：我在created 函数中放置了一个window.addEventListener('load', () => )，它会运行该代码。

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

我觉得有一种更 vue-tiful 的方式来做这件事，否则我会错过一些 vue-terans 会责备我的东西，但是在这一点上 vue 已经多次拍我的手腕了我懒得再试了。是哈克的解决方法！