![image](https://developer.qcloudimg.com/http-save/yehe-1209475/b25fa61e58d51d8cb01feb5b3da9fb5e.png)

## 前言

你好，我是喵喵侠，是一名前端开发。

闭包并不是一个高大上的概念，它其实藏在我们日常的代码中，尤其是在 Vue 3 中。无论是 `ref`​、`computed`​、`watch`​，还是 `setup` 返回的函数，闭包几乎无处不在。今天，我们来梳理下 Vue 3 中常见的闭包应用场景，帮助你理解它们背后的原理，同时避免潜在的内存泄漏问题。你或许已经在用这些特性，但未必意识到闭包正在悄悄地影响你的代码和性能。

## 闭包本质

首先，理解闭包的本质是非常重要的。闭包是由**函数**和其​**词法环境**（lexical environment）组成的。当一个函数被创建时，它会捕获函数创建时所在的作用域（即局部变量），即使该函数在外部调用时，这些变量依然可用。

### 闭包的关键组成部分：

1. **函数本身**：闭包的核心是函数，它会被返回并执行。
2. **词法环境**：包含函数外部的所有局部变量和参数。

闭包在 JavaScript 中被广泛应用，尤其在 Vue 的响应式系统和 Composition API 中，发挥着举足轻重的作用。

## Vue 中经典的 10 个闭包场景

### 1. `setup` 返回的函数

在 Vue 3 的 Composition API 中，`setup`​ 是每个组件的核心部分，返回的函数经常隐式地形成闭包，持有对 `setup` 内部变量的引用。

```vue
<script setup>
import { ref } from 'vue';

const count = ref(0);

const increment = () => {
  count.value++;
};

return { count, increment };
</script>
```

这里，`increment`​ 是一个闭包函数，它能够访问并操作 `count`​ 的值，即使 `setup` 函数已经执行完毕。

### 2. `useXXX` composable 函数

在 Vue 中，`composables` 函数通常返回一些状态或行为，这些返回的函数会形成闭包，保持对某些数据的引用。

```javascript
// useCounter.js
import { ref } from 'vue';

export function useCounter() {
  const count = ref(0);

  const increment = () => {
    count.value++;
  };

  return { count, increment };
}
```

当你在多个组件中使用 `useCounter`​ 时，`increment`​ 函数会记住它所引用的 `count`，每次调用时都能更新相同的状态。

### 3. `computed` 中的闭包

`computed` 会基于其依赖的数据自动缓存计算结果，它实际上就是通过闭包来引用和管理依赖的数据。

```vue
<script setup>
import { ref, computed } from 'vue';

const price = ref(100);
const quantity = ref(2);

const totalPrice = computed(() => price.value * quantity.value);
</script>
```

`totalPrice`​ 是一个闭包，它捕获了 `price`​ 和 `quantity` 的值，在这些值变化时重新计算总价。

### 4. `watch` 中的闭包

`watch` 是一个非常典型的闭包使用场景，尤其是在监听响应式数据时，它会保持对该数据的引用，确保在数据变化时执行回调。

```vue
<script setup>
import { ref, watch } from 'vue';

const data = ref(0);

watch(data, (newValue, oldValue) => {
  console.log(`Data changed from ${oldValue} to ${newValue}`);
});
</script>
```

`watch`​ 的回调函数保持了对 `data`​ 的引用，使得每次 `data` 改变时都能执行回调。

### 5. `v-for`​ 中的 `key` 问题

如果你没有在 `v-for`​ 中正确使用 `key`，Vue 会重渲染整个列表，而不是复用已有的 DOM 元素，这可能导致性能瓶颈。

```vue
<template>
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</template>
```

虽然这看起来与闭包关系不大，但 Vue 使用闭包来“记住”列表项的数据和状态，确保在渲染过程中能够精准更新元素。

### 6. `ref` 的闭包特性

当你使用 `ref`​ 创建响应式引用时，`ref.value` 就像是一个闭包，能够“记住”值，并在组件重渲染时保持该值。

```vue
<script setup>
import { ref } from 'vue';

const name = ref('Vue');
</script>
```

这里的 `name`​ 是一个闭包，它存储了 `value`​，即使组件被重新渲染，`name.value` 依然保留着原有的值。

### 7. `onMounted` 中的闭包

`onMounted` 是 Vue 生命周期的一部分，当组件挂载后执行的回调函数往往包含闭包，它们能够访问到组件的响应式数据。

```vue
<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  console.log(count.value); // 闭包，能够访问 count
});
</script>
```

此时，`onMounted`​ 内部的回调函数保持对 `count` 的引用，确保在组件挂载时访问到最新的值。

### 8. `setInterval`​ / `setTimeout` 的闭包

在 Vue 中，`setInterval`​ 和 `setTimeout` 等定时函数创建的回调通常也是闭包，特别是当它们依赖组件中的响应式数据时。

```vue
<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  setInterval(() => {
    count.value++;
  }, 1000);
});
</script>
```

此时，`setInterval`​ 的回调函数会保持对 `count`​ 的引用，使得每秒更新 `count`。

### 9. `watchEffect` 的闭包

`watchEffect` 会自动追踪所有响应式数据的变化，形成一个闭包，确保每次响应式数据变化时，副作用逻辑会重新执行。

```vue
<script setup>
import { ref, watchEffect } from 'vue';

const count = ref(0);

watchEffect(() => {
  console.log(count.value); // 闭包，追踪 count
});
</script>
```

这里，`watchEffect`​ 内部的函数会自动捕获 `count`​ 的变化，并在每次 `count` 变化时执行回调。

### 10. 动态事件监听的闭包

当你在 Vue 中动态监听事件时（例如使用 `addEventListener`），事件回调函数会创建闭包，保持对特定数据的引用。

```vue
<script setup>
import { ref, onMounted } from 'vue';

const count = ref(0);

onMounted(() => {
  window.addEventListener('resize', () => {
    console.log(count.value);
  });
});
</script>
```

这里，`resize`​ 事件的回调函数是一个闭包，能够访问 `count` 的最新值。

## 闭包导致的内存泄漏

闭包虽然非常强大，但如果不小心，它可能导致内存泄漏。尤其是在使用 `watch`​ 或 `computed` 时，如果没有及时清理不再使用的闭包引用，可能会导致组件销毁时依然占用内存。

### `watch` 中的内存泄漏

如果你没有在组件销毁时停止 `watch`，它所持有的闭包可能会一直存在，导致内存泄漏。

```vue
<script setup>
import { ref, watch, onUnmounted } from 'vue';

const data = ref(0);

const stopWatch = watch(data, (newValue) => {
  console.log(newValue);
});

onUnmounted(() => {
  stopWatch(); // 停止 watch，避免内存泄漏
});
</script>
```

通过使用 `onUnmounted`​ 钩子清理 `watch`，我们可以防止内存泄漏。

## 总结

闭包是 Vue 3 中非常常见的技术，存在于 `ref`​、`computed`​、`watch`​ 等多个地方。它使得 Vue 的响应式系统和组件功能得以实现，但如果不正确管理，它也可能导致内存泄漏等问题。在日常开发中，我们需要对这些闭包的应用场景有清晰的认识，并采取适当的清理措施，如使用 `onUnmounted` 来避免内存泄漏。


闭包并不是一个高大上的概念，它其实藏在我们日常的代码中，尤其是在 Vue 3 中。无论是 ref​、computed​、watch​，还是 setup 返回的函数，闭包几乎无处不在。今天，我们来梳理下 Vue 3 中常见的闭包应用场景，帮助你理解它们背后的原理，同时避免潜在的内存泄漏问题。你或许已经在用这些特性，但未必意识到闭包正在悄悄地影响你的代码和性能。

Vue 3 中的闭包：你每天用但没意识到的 10 个场景

前端

Vue3开发中闭包无处不在，从setup函数到computed/watch，再到事件监听，闭包机制支撑着Vue的响应式系统。本文详解10个常见闭包场景，包括ref、computed、watch等核心功能，同时揭示闭包可能导致的内存泄漏问题及解决方案，帮助开发者优化Vue3应用性能。

文章

问答

视频

教程

学习中心

腾讯云实验室

直播

竞赛

腾讯云代码分析专区

腾讯iOA零信任安全管理系统专区

腾讯云架构师技术同盟交流圈

腾讯云数据库专区

腾讯云智能顾问专区

腾讯云原生专区

腾讯混元专区

腾讯云TCE专区

腾讯云Lighthouse专区

腾讯云HAI专区

腾讯云Edgeone专区

腾讯云存储专区

腾讯云智能专区

腾讯轻联专区 

腾讯云开发专区

TAPD专区

腾讯轻量云游戏服专区

腾讯云最具价值专家

腾讯云架构师技术同盟

腾讯云创作之星

腾讯云开发者先锋

腾讯云代码助手

云原生构建

TAPD 敏捷项目管理

Cloud Studio

SDK中心

API中心

命令行工具

涵盖代码开发、场景应用、自动测试全流程，助你从零构建专属AI助手

一站式MCP教程库，解锁AI应用新玩法

聚焦“写作效率、视觉美观与运行性能”三方面进行全面升级，为您提供更高效、稳定的创作环境

社区富文本&Markdown编辑器全新改版上线，欢迎大家体验!

诚挚邀请您参与本次调研，分享您的真实使用感受与建议。您的反馈至关重要，感谢您的支持与参与！

社区新版编辑器体验调研

Vue 3 中的闭包：你每天用但没意识到的 10 个场景-腾讯云开发者社区-腾讯云

Vue 3 中的闭包：你每天用但没意识到的 10 个场景

Vue 3 中的闭包：你每天用但没意识到的 10 个场景

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐