vue3 怎么使用this

在 Vue 3 中，可以使用 `setup` 函数来访问 `this` 对象的属性和方法。在 `setup` 函数中，`this` 对象被替换为 `context` 对象。

例如：

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

<script>
import { reactive } from 'vue';

export default {
  setup() {
    const state = reactive({
      message: 'Hello Vue 3!',
    });

    const changeMessage = () => {
      state.message = 'Hello World!';
    };

    return {
      message: state.message,
      changeMessage,
    };
  },
};
</script>

在上面的示例中，我们使用了 `reactive` 函数来创建一个响应式对象 `state`，并在 `setup` 函数中定义了 `message` 属性和 `changeMessage` 方法。然后，我们将它们作为返回值暴露给模板使用。

在模板中，我们使用 `{{ message }}` 来显示 `message` 属性的值，并使用 `@click` 监听 `changeMessage` 方法的调用。

注意，我们没有使用 `this` 关键字来访问属性和方法，而是直接使用了 `message` 和 `changeMessage` 变量。这是因为 Vue 3 中的 `setup` 函数已经替换了 `this` 对象为 `context` 对象，并且在模板中也不能使用 `this` 关键字。