MK
摩柯社区 - 一个极简的技术知识社区
AI 面试

Vue生命周期钩子 组件销毁时需要注意的细节

2021-05-025.9k 阅读

Vue 生命周期钩子：组件销毁时需要注意的细节

组件销毁的概念与 Vue 生命周期

在 Vue 应用中，组件是构建用户界面的基本单元。Vue 提供了一套完整的生命周期钩子函数，允许开发者在组件的不同阶段执行特定的逻辑。其中，组件销毁阶段是一个非常重要且需要谨慎处理的环节。

Vue 的生命周期可以简单概括为从组件创建、挂载到更新，最后到销毁的整个过程。在组件销毁时，Vue 会触发 beforeDestroy 和 destroyed 这两个生命周期钩子函数。理解这两个钩子函数的作用以及在组件销毁时可能出现的细节问题，对于编写健壮的 Vue 应用至关重要。

beforeDestroy 钩子函数

beforeDestroy 钩子函数在组件实例销毁之前调用。此时，组件实例依然存在，所有的 data、methods、computed 等属性和方法都还可以正常访问。这是一个很好的时机来进行一些清理工作，例如清除定时器、解绑事件监听器等。

清除定时器示例

在很多 Vue 组件中，我们可能会使用 setInterval 或 setTimeout 来实现一些定时任务。如果在组件销毁时不清除这些定时器，可能会导致内存泄漏或不必要的副作用。

<template>
  <div>
    <p>Count: {{ count }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0,
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      this.count++;
    }, 1000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

在上述代码中，组件在 mounted 钩子函数中启动了一个定时器，每秒增加 count 的值。在 beforeDestroy 钩子函数中，我们检查 timer 是否存在，如果存在则使用 clearInterval 清除定时器，并将 timer 设为 null。这样可以确保在组件销毁时，定时器不会继续运行，避免潜在的问题。

解绑自定义事件监听器

在 Vue 组件中，我们经常会使用 $on 来监听自定义事件。当组件销毁时，如果不解除这些事件监听器，可能会导致事件处理函数继续执行，甚至可能引发错误。

<template>
  <div>
    <button @click="sendCustomEvent">Send Custom Event</button>
  </div>
</template>

<script>
export default {
  methods: {
    sendCustomEvent() {
      this.$emit('custom-event', 'Hello, this is a custom event!');
    }
  },
  created() {
    this.$on('custom-event', (message) => {
      console.log('Received custom event:', message);
    });
  },
  beforeDestroy() {
    this.$off('custom-event');
  }
};
</script>

在这个例子中，组件在 created 钩子函数中使用 $on 监听了 custom - event 自定义事件。在 beforeDestroy 钩子函数中，我们使用 $off 方法解绑了这个事件监听器。这样，当组件销毁后，即使有其他地方触发了 custom - event 事件，也不会再执行对应的事件处理函数。

destroyed 钩子函数

destroyed 钩子函数在组件实例销毁后调用。此时，组件实例的所有指令都已解绑，所有的事件监听器都已移除，子组件实例也已被销毁。这个钩子函数通常用于执行一些组件完全销毁后的操作，例如记录日志等。

<template>
  <div>
    <p>This is a component.</p>
  </div>
</template>

<script>
export default {
  destroyed() {
    console.log('Component has been destroyed.');
  }
};
</script>

在上述代码中，当组件被销毁时，destroyed 钩子函数会在控制台打印一条日志信息。虽然这里只是简单的日志记录，但在实际项目中，可以根据需求进行更复杂的操作，例如向服务器发送销毁相关的统计信息等。

子组件销毁的细节

在 Vue 应用中，组件之间通常存在父子关系。当父组件销毁时，子组件也会随之销毁。然而，在子组件销毁过程中，同样需要注意一些细节。

子组件的清理工作

子组件和父组件一样，在销毁时也需要进行必要的清理。例如，子组件如果有自己的定时器或事件监听器，也应该在 beforeDestroy 钩子函数中进行清除和解绑操作。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent v-if="showChild" />
    <button @click="toggleChild">Toggle Child</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      showChild: true
    };
  },
  methods: {
    toggleChild() {
      this.showChild =!this.showChild;
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>This is a child component.</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      timer: null
    };
  },
  mounted() {
    this.timer = setInterval(() => {
      console.log('Child component timer is running.');
    }, 2000);
  },
  beforeDestroy() {
    if (this.timer) {
      clearInterval(this.timer);
      this.timer = null;
    }
  }
};
</script>

在上述代码中，ParentComponent 控制着 ChildComponent 的显示与隐藏。ChildComponent 在 mounted 钩子函数中启动了一个定时器，并且在 beforeDestroy 钩子函数中清除了该定时器。这样可以保证当 ChildComponent 被销毁时，定时器能够被正确清理。

父子组件通信与子组件销毁

在父子组件通信过程中，如果父组件通过 props 向子组件传递数据，并且子组件在接收到这些数据后进行了一些基于这些数据的操作（例如创建了相关的资源），那么在子组件销毁时，需要确保这些操作的清理。

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent :data="parentData" v-if="showChild" />
    <button @click="toggleChild">Toggle Child</button>
    <button @click="changeData">Change Data</button>
  </div>
</template>

<script>
import ChildComponent from './ChildComponent.vue';

export default {
  components: {
    ChildComponent
  },
  data() {
    return {
      parentData: 'Initial data',
      showChild: true
    };
  },
  methods: {
    toggleChild() {
      this.showChild =!this.showChild;
    },
    changeData() {
      this.parentData = 'New data';
    }
  }
};
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Received data: {{ data }}</p>
  </div>
</template>

<script>
export default {
  props: ['data'],
  data() {
    return {
      // 假设这里基于接收到的 props 创建了一个临时资源
      tempResource: null
    };
  },
  created() {
    this.tempResource = this.createResource(this.data);
  },
  beforeDestroy() {
    // 清理临时资源
    if (this.tempResource) {
      this.destroyResource(this.tempResource);
      this.tempResource = null;
    }
  },
  methods: {
    createResource(data) {
      // 模拟创建资源的操作
      return { value: data };
    },
    destroyResource(resource) {
      // 模拟销毁资源的操作
      console.log('Destroying resource:', resource);
    }
  }
};
</script>

在这个例子中，ParentComponent 通过 props 向 ChildComponent 传递 parentData。ChildComponent 在 created 钩子函数中基于接收到的 data 创建了一个临时资源 tempResource。在 beforeDestroy 钩子函数中，子组件负责清理这个临时资源，确保在组件销毁时不会留下未处理的资源。

第三方插件与组件销毁

在 Vue 项目中，我们经常会使用各种第三方插件来增强应用的功能。当使用这些插件时，在组件销毁时也需要注意相关的清理工作。

地图插件示例

以使用百度地图插件为例，在 Vue 组件中集成百度地图功能时，需要在组件销毁时释放地图资源，避免内存泄漏。

<template>
  <div id="map-container"></div>
</template>

<script>
export default {
  data() {
    return {
      map: null
    };
  },
  mounted() {
    const BMap = window.BMap;
    this.map = new BMap.Map('map-container');
    const point = new BMap.Point(116.404, 39.915);
    this.map.centerAndZoom(point, 15);
  },
  beforeDestroy() {
    if (this.map) {
      this.map.clearOverlays();
      this.map.removeEventListener('click', this.handleMapClick);
      this.map.destroy();
      this.map = null;
    }
  },
  methods: {
    handleMapClick() {
      console.log('Map clicked.');
    }
  }
};
</script>

<style scoped>
#map-container {
  width: 100%;
  height: 400px;
}
</style>

在上述代码中，组件在 mounted 钩子函数中初始化了百度地图。在 beforeDestroy 钩子函数中，首先清除地图上的覆盖物，解绑点击事件监听器，然后调用 map.destroy() 方法销毁地图实例，并将 map 设为 null。这样可以确保在组件销毁时，百度地图相关的资源能够被正确释放。

表单验证插件

在使用表单验证插件时，例如 vee - validate，在组件销毁时也需要进行一些清理操作。虽然 vee - validate 本身在组件销毁时会自动清理一些内部状态，但如果我们在组件中自定义了一些验证规则或添加了额外的事件监听器，就需要手动清理。

<template>
  <form @submit.prevent="submitForm">
    <input v-validate="'required'" name="username" placeholder="Username">
    <input type="submit" value="Submit">
  </form>
</template>

<script>
import { extend, ValidationObserver, ValidationProvider } from'vee - validate';
import { required } from'vee - validate/dist/rules';

extend('required', {
  ...required,
  message: 'This field is required.'
});

export default {
  components: {
    ValidationObserver,
    ValidationProvider
  },
  data() {
    return {
      customListener: null
    };
  },
  mounted() {
    this.customListener = this.$refs.observer.$on('input', () => {
      console.log('Input event in form.');
    });
  },
  beforeDestroy() {
    if (this.customListener) {
      this.$refs.observer.$off('input', this.customListener);
      this.customListener = null;
    }
  },
  methods: {
    submitForm() {
      this.$refs.observer.validate().then((isValid) => {
        if (isValid) {
          console.log('Form is valid.');
        } else {
          console.log('Form is invalid.');
        }
      });
    }
  }
};
</script>

在这个例子中，我们在 mounted 钩子函数中为 ValidationObserver 实例添加了一个自定义的 input 事件监听器。在 beforeDestroy 钩子函数中，我们移除了这个事件监听器，确保在组件销毁时不会留下不必要的事件绑定。

内存泄漏与组件销毁

内存泄漏是指程序在申请内存后，无法释放已申请的内存空间，导致内存浪费，最终可能使应用程序性能下降甚至崩溃。在 Vue 组件销毁时，如果不注意清理相关资源，很容易引发内存泄漏问题。

闭包与内存泄漏

闭包是 JavaScript 中一个强大的特性，但如果使用不当，在组件销毁时可能导致内存泄漏。

<template>
  <div>
    <button @click="createClosure">Create Closure</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      closure: null
    };
  },
  methods: {
    createClosure() {
      const self = this;
      this.closure = function() {
        console.log('Closure:', self);
      };
    }
  },
  beforeDestroy() {
    if (this.closure) {
      this.closure = null;
    }
  }
};
</script>

在上述代码中，createClosure 方法创建了一个闭包，该闭包持有了组件实例 this 的引用。如果在组件销毁时不将 closure 设为 null，这个闭包会一直持有组件实例的引用，导致组件实例无法被垃圾回收机制回收，从而引发内存泄漏。通过在 beforeDestroy 钩子函数中清理 closure，可以避免这种情况。

DOM 引用与内存泄漏

如果在 Vue 组件中直接操作 DOM 并保留了对 DOM 元素的引用，在组件销毁时如果不释放这些引用，也可能导致内存泄漏。

<template>
  <div>
    <div ref="targetDiv">This is a div.</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      domReference: null
    };
  },
  mounted() {
    this.domReference = this.$refs.targetDiv;
    // 假设进行一些基于 domReference 的操作
  },
  beforeDestroy() {
    if (this.domReference) {
      this.domReference = null;
    }
  }
};
</script>

在这个例子中，组件在 mounted 钩子函数中获取了 targetDiv 的引用并保存到 domReference 中。在 beforeDestroy 钩子函数中，我们将 domReference 设为 null，以确保在组件销毁时，对该 DOM 元素的引用被释放，避免内存泄漏。

动态组件销毁的特殊情况

在 Vue 中，我们经常会使用动态组件来根据不同的条件渲染不同的组件。在动态组件销毁时，也有一些特殊情况需要注意。

动态组件切换与销毁

当动态组件在不同组件之间切换时，前一个组件会被销毁，后一个组件会被创建。在这种情况下，每个组件都需要正确处理自己的销毁逻辑。

<template>
  <div>
    <component :is="currentComponent" />
    <button @click="switchComponent">Switch Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA'? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

<!-- ComponentA.vue -->
<template>
  <div>
    <p>This is ComponentA.</p>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    console.log('ComponentA is being destroyed.');
    // 进行 ComponentA 的清理工作
  }
};
</script>

<!-- ComponentB.vue -->
<template>
  <div>
    <p>This is ComponentB.</p>
  </div>
</template>

<script>
export default {
  beforeDestroy() {
    console.log('ComponentB is being destroyed.');
    // 进行 ComponentB 的清理工作
  }
};
</script>

在上述代码中，ComponentA 和 ComponentB 是两个动态切换的组件。当切换组件时，前一个组件会触发 beforeDestroy 钩子函数，我们可以在这个钩子函数中进行相应的清理工作。

动态组件与 keep - alive

keep - alive 是 Vue 提供的一个抽象组件，它可以将动态组件缓存起来，避免重复创建和销毁。然而，当使用 keep - alive 时，组件的销毁逻辑会有所不同。

<template>
  <div>
    <keep - alive>
      <component :is="currentComponent" />
    </keep - alive>
    <button @click="switchComponent">Switch Component</button>
  </div>
</template>

<script>
import ComponentA from './ComponentA.vue';
import ComponentB from './ComponentB.vue';

export default {
  components: {
    ComponentA,
    ComponentB
  },
  data() {
    return {
      currentComponent: 'ComponentA'
    };
  },
  methods: {
    switchComponent() {
      this.currentComponent = this.currentComponent === 'ComponentA'? 'ComponentB' : 'ComponentA';
    }
  }
};
</script>

在这种情况下，当组件切换时，被切换掉的组件不会真正销毁，而是被缓存起来。此时，beforeDestroy 和 destroyed 钩子函数不会被调用。如果在这种场景下需要进行一些类似于销毁时的清理工作，可以使用 deactivated 钩子函数。deactivated 钩子函数在组件被 keep - alive 缓存且停止活动时调用。

<!-- ComponentA.vue -->
<template>
  <div>
    <p>This is ComponentA.</p>
  </div>
</template>

<script>
export default {
  deactivated() {
    console.log('ComponentA is being deactivated (similar to destroyed in this context).');
    // 进行类似于销毁时的清理工作
  }
};
</script>

通过合理使用 deactivated 钩子函数，我们可以在使用 keep - alive 的动态组件场景下，正确处理组件不再活动时的清理逻辑。

总结

在 Vue 前端开发中，组件销毁是一个需要谨慎对待的环节。通过正确使用 beforeDestroy 和 destroyed 生命周期钩子函数，以及在特殊情况下如子组件销毁、第三方插件使用、动态组件场景等注意相应的细节，我们可以有效地避免内存泄漏、资源未释放等问题，从而构建出更加健壮、性能良好的 Vue 应用。无论是清除定时器、解绑事件监听器，还是处理第三方插件资源的释放，都需要开发者在开发过程中仔细考虑和处理，以确保应用的稳定性和可靠性。同时，理解 Vue 生命周期的各个阶段以及组件销毁时的底层原理，有助于我们更好地编写可维护、高性能的前端代码。在实际项目中，不断积累经验，针对不同的业务场景进行合理的组件销毁处理，是提升 Vue 应用质量的关键之一。在面对复杂的组件结构和业务逻辑时，更要严格遵循组件销毁的相关原则，确保每个组件在完成其使命后能够正确地被销毁，释放其所占用的资源，为整个应用的高效运行提供保障。