vue3hooks

// 使用 Vue 3 的 Composition API (hooks) 示例

<template>
  <div>
    <p>Count: {{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    // 创建一个响应式的 count 变量
    const count = ref(0);

    // 定义一个方法来增加 count 的值
    const increment = () => {
      count.value++;
    };

    // 返回需要在模板中使用的变量和方法
    return {
      count,
      increment
    };
  }
};
</script>

<style scoped>
/* 添加一些样式 */
button {
  margin-top: 10px;
  padding: 5px 10px;
}
</style>

解释说明：

• ref: ref 是 Vue 3 中用于创建响应式数据的一个函数。它返回一个包含 .value 属性的对象，该属性可以被读取和修改，并且当其值发生变化时，Vue 会自动更新相关的视图。

• setup 函数: 这是 Composition API 的入口点。所有的逻辑（如状态管理、事件处理等）都可以在这个函数中定义。setup 函数返回的对象中的属性和方法可以直接在模板中使用。

• count 和 increment: 在这个例子中，我们创建了一个名为 count 的响应式变量，并定义了一个 increment 方法来增加它的值。通过点击按钮触发 increment 方法，count 的值会增加，并且视图会自动更新。

如果你需要更复杂的逻辑或更多的 hooks，可以进一步扩展这个示例。