如何理解Vue3的methods选项？试编程简单举例加以说明

在Vue3中，methods选项用于声明组件中的方法，可以在组件内部的模板中使用。与Vue2类似，Vue3的methods选项可以是一个包含多个方法的对象。

下面是一个简单的例子，展示了如何在Vue3中使用methods选项：

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

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

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

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

      return {
        message: data.message,
        changeMessage
      };
    },
    methods: {
      showMessage() {
        alert(this.message);
      }
    }
  };
</script>

在上面的例子中，我们在methods选项中声明了一个showMessage方法，当这个方法被调用时，会弹出一个提示框，显示当前的message变量的值。在模板中，我们在按钮上使用了@click指令，绑定了changeMessage方法，当按钮被点击时，就会调用这个方法，从而改变message变量的值。而在p标签中，我们使用了双括号语法来绑定message变量，这样当message变量发生变化时，p标签中的内容也会随之更新。

需要注意的是，在Vue3中，由于setup函数的存在，组件中的方法无法直接访问组件实例中的数据和方法，需要通过返回值来暴露出去。在上面的例子中，我们在setup函数中将message变量和changeMessage方法暴露给了模板，因此在methods选项中可以通过this.message和this.changeMessage来访问。