阐述 Vue 3 源码中 `getCurrentInstance` 的作用，以及它在 `Composition API` 中的用途和局限性。

各位靓仔靓女，晚上好！我是今晚的特邀讲师，人称“代码界的段子手”，今天咱们来聊聊 Vue 3 源码里那个神秘兮兮的 getCurrentInstance。别害怕，听名字好像很高大上，其实它就是个“老妈子”角色，专门负责给你找“孩子”的。

一、getCurrentInstance：你的 Vue 组件“寻亲记”

想象一下，你身处一个庞大的家族，家族里有各种各样的亲戚，你爸、你妈、你叔、你婶……在 Vue 组件的世界里，每个组件也是这个家族的一员。而 getCurrentInstance 就好比家族族谱管理员，它可以帮你找到你当前所在的那个 Vue 组件实例。

那么，这个“老妈子”到底长啥样？

import { getCurrentInstance } from 'vue';

// 在 setup 函数内部使用
export default {
  setup() {
    const instance = getCurrentInstance();

    if (instance) {
      console.log('当前组件实例：', instance);
      console.log('组件的 props：', instance.props);
      console.log('组件的 emits：', instance.emit);
      // ... 还可以访问更多组件信息
    } else {
      console.warn('getCurrentInstance 只能在 setup 函数或生命周期钩子中使用！');
    }

    return {};
  }
};

代码很简单，对吧？ getCurrentInstance 返回的是一个 ComponentInternalInstance 类型的对象，这个对象包含了当前组件实例的所有信息，比如 props、emit、slots、vnode 等等。

注意：

• getCurrentInstance 只能在 setup 函数内部或者生命周期钩子（如 onMounted、onUpdated）中使用。如果你在其他地方调用它，它会返回 null。
• 在组件的 setup 函数中，getCurrentInstance 只会在组件初始化的时候返回组件实例。在 setup 函数返回之后，instance 对象不会自动更新，所以不要依赖它来获取响应式数据。

二、Composition API 中的“妙用”

在 Composition API 中，getCurrentInstance 有着举足轻重的作用。它可以帮你访问组件实例的内部属性和方法，从而实现一些高级的功能。

1. 访问组件的 props 和 emit

虽然在 setup 函数中可以直接通过参数访问 props 和 emit，但在某些情况下，你可能需要在其他地方访问它们。这时候，getCurrentInstance 就可以派上用场了。

import { getCurrentInstance, onMounted } from 'vue';

export default {
  props: {
    message: {
      type: String,
      required: true
    }
  },
  emits: ['update'],
  setup(props, { emit }) {
    const instance = getCurrentInstance();

    onMounted(() => {
      // 延迟一段时间后，触发 update 事件
      setTimeout(() => {
        if (instance) {
          // 通过 instance.emit 触发事件
          instance.emit('update', '新的消息');
        }
      }, 2000);
    });

    return {};
  }
};

在这个例子中，我们在 onMounted 钩子中延迟了 2 秒后，通过 instance.emit 触发了 update 事件。虽然直接使用 emit 参数也可以实现同样的功能，但在某些复杂的场景下，使用 getCurrentInstance 可以更灵活地控制事件的触发。

2. 访问组件的 slots

slots 是 Vue 组件中用于分发内容的机制。通过 getCurrentInstance，你可以访问组件的 slots 对象，从而获取插槽的内容。

import { getCurrentInstance, h } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    return () => {
      if (instance) {
        const slots = instance.slots;

        // 渲染默认插槽的内容
        return h('div', null, slots.default ? slots.default() : '没有内容');
      } else {
        return h('div', null, '组件实例不可用');
      }
    };
  }
};

在这个例子中，我们通过 instance.slots.default() 获取了默认插槽的内容，并将其渲染到页面上。

3. 访问组件的 vnode

vnode 是 Vue 虚拟 DOM 中的节点。通过 getCurrentInstance，你可以访问组件的 vnode 对象，从而获取组件的虚拟 DOM 信息。

import { getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    const instance = getCurrentInstance();

    onMounted(() => {
      if (instance) {
        const vnode = instance.vnode;
        console.log('组件的 vnode：', vnode);
      }
    });

    return {};
  }
};

虽然直接操作 vnode 的场景不多，但在某些高级的组件开发中，vnode 可以用来实现一些特殊的渲染效果。

4. 配合 provide/inject 实现跨组件通信

provide/inject 是 Vue 中一种依赖注入机制，允许父组件向其所有子组件提供数据或方法，而无需通过 props 逐层传递。getCurrentInstance 可以配合 provide/inject 实现更灵活的跨组件通信。

// 父组件
import { provide } from 'vue';

export default {
  setup() {
    const message = 'Hello from parent!';

    // 提供 message 数据
    provide('message', message);

    return {};
  }
};

// 子组件
import { inject, getCurrentInstance, onMounted } from 'vue';

export default {
  setup() {
    // 注入 message 数据
    const message = inject('message');
    const instance = getCurrentInstance();

    onMounted(() => {
      if (instance) {
        console.log('子组件接收到的消息：', message);
      }
    });

    return {};
  }
};

在这个例子中，父组件通过 provide 提供了 message 数据，子组件通过 inject 注入了 message 数据。getCurrentInstance 在这里的作用是确保子组件在挂载后能够访问到注入的数据。

三、getCurrentInstance 的“局限性”

虽然 getCurrentInstance 很强大，但它也有一些局限性。

1. 只能在 setup 函数或生命周期钩子中使用

这是 getCurrentInstance 最主要的限制。如果你在其他地方调用它，它会返回 null。这意味着你不能在组件的模板中直接使用 getCurrentInstance。

2. 破坏了组件的封装性

getCurrentInstance 允许你访问组件实例的内部属性和方法，这可能会破坏组件的封装性。过度使用 getCurrentInstance 可能会导致组件之间的耦合度过高，不利于组件的复用和维护。

3. 可能导致性能问题

访问组件实例的内部属性和方法可能会导致性能问题。例如，如果你频繁地通过 instance.props 访问 props，可能会导致组件的重新渲染。

4. 类型安全问题

由于 getCurrentInstance 返回的是一个 ComponentInternalInstance 类型的对象，这个对象的类型定义比较宽泛。如果你需要访问组件实例的特定属性或方法，可能需要进行类型断言，这可能会导致类型安全问题。

四、getCurrentInstance 的替代方案

既然 getCurrentInstance 有这么多局限性，那么有没有替代方案呢？

答案是肯定的。在大多数情况下，你可以使用以下替代方案来避免使用 getCurrentInstance：

• 使用 props 和 emit 进行组件通信：这是最常用的组件通信方式，也是最推荐的方式。
• 使用 provide/inject 进行跨组件通信：provide/inject 可以让你在组件树中传递数据，而无需通过 props 逐层传递。
• 使用 ref 获取 DOM 元素：ref 可以让你获取组件的 DOM 元素，从而实现一些底层的操作。
• 使用 Vuex 或 Pinia 进行状态管理：Vuex 和 Pinia 是 Vue 的状态管理库，可以让你在组件之间共享状态。

五、什么时候应该使用 getCurrentInstance？

虽然有很多替代方案，但在某些情况下，使用 getCurrentInstance 仍然是必要的。

以下是一些适合使用 getCurrentInstance 的场景：

• 开发高级的组件库：如果你正在开发一个高级的组件库，你可能需要访问组件实例的内部属性和方法来实现一些特殊的功能。
• 与第三方库集成：如果你需要与第三方库集成，你可能需要访问组件实例的内部属性和方法来与第三方库进行交互。
• 调试和测试：getCurrentInstance 可以让你在调试和测试时访问组件实例的内部状态，从而更方便地定位问题。

六、总结

getCurrentInstance 是 Vue 3 源码中一个强大的 API，它可以让你访问组件实例的内部属性和方法。但在使用 getCurrentInstance 时，你需要注意它的局限性，并尽可能使用替代方案。只有在必要的情况下，才应该使用 getCurrentInstance。

特性	优点	缺点	适用场景
getCurrentInstance	可以访问组件实例的内部属性和方法，例如 props、emit、slots、vnode 等。在某些高级场景下，可以实现一些特殊的功能。	只能在 setup 函数或生命周期钩子中使用；破坏组件的封装性；可能导致性能问题；类型安全问题。	开发高级的组件库；与第三方库集成；调试和测试。
props 和 emit	这是最常用的组件通信方式，也是最推荐的方式。它简单、清晰、易于维护。	需要逐层传递 props 和 emit，在组件树较深的情况下，可能会比较繁琐。	绝大多数组件通信场景。
provide/inject	可以让你在组件树中传递数据，而无需通过 props 逐层传递。	可能会导致组件之间的依赖关系不清晰；不适合传递响应式数据。	跨组件通信，例如主题切换、全局配置等。
ref	可以让你获取组件的 DOM 元素，从而实现一些底层的操作。	只能获取 DOM 元素，不能访问组件实例的内部属性和方法。	需要直接操作 DOM 元素的场景，例如自定义指令、动画效果等。
Vuex/Pinia	可以让你在组件之间共享状态，从而实现更复杂的状态管理。	需要引入额外的库；学习成本较高。	需要进行复杂的状态管理的场景，例如购物车、用户登录状态等。

好了，今天的讲座就到这里。希望大家通过今天的学习，能够更深入地理解 getCurrentInstance 的作用，并在实际开发中合理地使用它。记住，工具是死的，人是活的，灵活运用才是王道！ 散会！