vue3新特性

作者：原来是梦发布日期:2026-05-04 浏览:133

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

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

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

    // 定义一个方法来更新 count
    const increment = () => {
      count.value++;
    };

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

<!-- 解释说明:
1. Composition API 是 Vue 3 的新特性之一，允许开发者更灵活地组织和重用逻辑。
2. `ref` 函数用于创建一个响应式的变量。在这个例子中，`count` 是一个响应式的数字。
3. `setup` 函数是 Composition API 的入口点，在其中定义组件的逻辑。
4. `return` 语句返回需要在模板中使用的变量和方法。 -->

上一篇：vue自定义组件

下一篇：vue img