vue 3 setup 写法
在Vue 3中，`setup` 函数是用于设置组件的函数。下面是一个简单的Vue 3组件，并展示了`setup`函数的写法：
```html
<template>
  <div>
    <h1>{{ message }}</h1>
vue中reactive
    <button @click="changeMessage">Change Message</button>
  </div>
</template>
<script>
import { ref } from 'vue';
export default {
  name: 'MyComponent',
  setup() {
    // 使用 ref 创建响应式数据
    const message = ref('Hello, Vue 3!');
    // 定义一个方法
    function changeMessage() {
      message.value = 'Message Changed!';
    }
    // 返回需要在模板中使用的数据和方法
    return {
      message,
      changeMessage,
    };
  },
};
</script>
<style>
/* 可选的样式 */
</style>
```
上述代码演示了Vue 3组件的基本结构，其中 `setup` 函数返回了一个包含数据和方法的对象。在 `setup` 函数中，我们使用 `ref` 函数创建了一个响应式数据 `message`，并定义了一个方法 `changeMessage` 用于改变 `message` 的值。
这种写法利用了Vue 3的 Composition API，通过 `ref` 和 `reactive` 等函数来创建响应式数据，以及在 `setup` 函数中定义组件的状态和行为。这使得组件的逻辑更加清晰且易于组织。

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。