vue2改到vue3

以下是将Vue2代码改为Vue3的简单操作步骤：

1. 更改script标签：将Vue2的script标签中的代码改为Vue3的script setup标签。在Vue3中，使用了新的Composition API来替代Vue2中的Options API。

2. 定义变量的不同：在Vue2中，可以直接使用this来访问组件中的数据。而在Vue3中，需要使用ref函数来定义响应式数据，并使用.value来访问数据。

3. 定义方法（函数）的不同：在Vue2中，可以直接在methods选项中定义方法。而在Vue3中，可以在setup函数中定义方法，并将其返回，以便在模板中使用。

4. 使用this的不同：在Vue2中，可以直接使用this来访问组件实例中的数据和方法。而在Vue3中，需要使用setup函数中的参数context来访问组件实例中的数据和方法。

下面是一个示例，演示了如何将Vue2代码改为Vue3：

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="updateMessage">Update Message</button>
  </div>
</template>

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

const message = ref('Hello Vue3')

const updateMessage = () => {
  message.value = 'Updated Message'
}
</script>