Vue 3 中 Composition API 的用法？-JavaScript中文网-JavaScript教程资源分享门户

推荐答案

在 Vue 3 中，Composition API 提供了一种更灵活的方式来组织和重用代码逻辑。它主要通过 setup 函数来实现，setup 函数是 Composition API 的入口点。以下是一个简单的示例：

// www.javascriptcn.com code example
<template>
  <div>
    <p>{{ count }}</p>
    <button @click="increment">Increment</button>
  </div>
</template>

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

export default {
  setup() {
    const count = ref(0);

    function increment() {
      count.value++;
    }

    return {
      count,
      increment,
    };
  },
};
</script>

在这个示例中，ref 用于创建一个响应式的数据引用，increment 函数用于更新这个数据。setup 函数返回的对象中的属性和方法可以在模板中直接使用。

本题详细解读

1. `setup` 函数

setup 函数是 Composition API 的核心，它在组件实例创建之前执行。setup 函数接收两个参数：

props：组件的 props 对象。
context：包含 attrs、slots、emit 等属性的上下文对象。

2. 响应式数据

在 Composition API 中，ref 和 reactive 是创建响应式数据的两种主要方式：

ref：用于创建基本类型的响应式数据，访问时需要 .value。
reactive：用于创建对象的响应式数据，访问时直接使用属性。

3. 生命周期钩子

Composition API 提供了与 Options API 相对应的生命周期钩子函数，例如 onMounted、onUpdated、onUnmounted 等。这些钩子函数可以在 setup 函数中使用：

// www.javascriptcn.com code example
import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component is mounted!');
    });
  },
};

4. 计算属性和侦听器

Composition API 提供了 computed 和 watch 函数来处理计算属性和侦听器：

computed：用于创建计算属性。
watch：用于侦听响应式数据的变化。

// www.javascriptcn.com code example
import { computed, watch } from 'vue';

export default {
  setup() {
    const count = ref(0);
    const doubleCount = computed(() => count.value * 2);

    watch(count, (newValue, oldValue) => {
      console.log(`Count changed from ${oldValue} to ${newValue}`);
    });

    return {
      count,
      doubleCount,
    };
  },
};

5. 组合逻辑

Composition API 的一个主要优势是能够将逻辑组合成可重用的函数。例如，可以将计数器的逻辑提取到一个单独的函数中：

// www.javascriptcn.com code example
import { ref } from 'vue';

function useCounter() {
  const count = ref(0);

  function increment() {
    count.value++;
  }

  return {
    count,
    increment,
  };
}

export default {
  setup() {
    const { count, increment } = useCounter();

    return {
      count,
      increment,
    };
  },
};

通过这种方式，可以在多个组件中重用相同的逻辑，从而提高代码的可维护性和可读性。

Vue 3 中 Composition API 的用法？