vue3setup语法糖如何获取组件实例

在 Vue 3 中，可以使用 `ref` 函数创建响应式的引用对象，而在组件内部，可以使用 `setup` 函数来获取到组件实例。

假设你有一个组件 `MyComponent`，那么可以在 `setup` 函数中将组件实例存储在一个 `ref` 对象中，如下所示：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="changeMessage">Change Message</button>
  </div>
</template>

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

export default {
  setup() {
    const message = ref('Hello, world!')

    const changeMessage = () => {
      message.value = 'Hello, Vue 3!'
    }

    onMounted(() => {
      console.log('Component mounted')
    })

    return {
      message,
      changeMessage
    }
  }
}
</script>

在上面的例子中，我们首先通过 `ref` 函数创建了一个响应式的引用对象 `message`，并将其初始化为 `'Hello, world!'`。然后，在 `setup` 函数中，我们定义了一个 `changeMessage` 方法，用于改变 `message` 的值。最后，我们通过 `return` 语句将 `message` 和 `changeMessage` 导出，以便在模板中使用。

当模板中的按钮被点击时，`changeMessage` 方法会被调用，它将 `message.value` 的值改为 `'Hello, Vue 3!'`。这个改变会自动触发模板中绑定到 `message` 的数据发生变化，从而更新视图。

需要注意的是，在 `setup` 函数中，我们可以使用 `onMounted` 钩子函数来执行一些组件初始化的操作，例如在组件挂载后打印一条消息。同时，我们还可以通过 `getCurrentInstance` 函数来获取当前组件实例，例如：

import { getCurrentInstance } from 'vue'

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

    // ...
  }
}

通过以上方法，我们就可以在 Vue 3 中获取到组件实例了。