请写一个vue3和vue2的对比，关于setup和this的，越简单越好

Vue 3 和 Vue 2 的主要区别之一是在组件中访问数据和方法的方式。在 Vue 2 中，我们使用 `this` 来访问组件实例中的数据和方法，而在 Vue 3 中，我们使用 `setup` 函数来访问这些内容。

下面是一个简单的对比示例：

Vue 2：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      message: 'Hello Vue 2'
    };
  },
  methods: {
    updateMessage() {
      this.message = 'Updated message';
    }
  }
};
</script>

Vue 3：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">更新消息</button>
  </div>
</template>

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

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

    const updateMessage = () => {
      data.message = 'Updated message';
    };

    return { ...data, updateMessage };
  }
};
</script>

在 Vue 2 的示例中，我们使用 `data` 属性来定义组件的数据，并通过 `methods` 对象定义组件的方法。在模板中，我们使用 `{{ message }}` 来显示数据，并使用 `@click` 来调用方法。

而在 Vue 3 的示例中，我们使用 `setup` 函数来设置组件。在 `setup` 函数内部，我们使用 `reactive` 函数将数据变为响应式，然后通过普通的 JavaScript 变量和函数来定义数据和方法。最后，我们通过 `return` 返回需要在模板中使用的数据和方法。

需要注意的是，在 Vue 3 中，我们不再使用 `this` 来访问数据和方法，而是直接使用普通的 JavaScript 变量和函数。这样做的好处是可以更好地组织代码，并且 `setup` 函数更容易进行测试和重用。

总结起来，Vue 3 中引入了 `setup` 函数来访问组件中的数据和方法，相比于 Vue 2 中使用 `this`，这种方式更加简洁和灵活。