vue3组合式API-优快云博客

本文链接：https://blog.youkuaiyun.com/fghyibib/article/details/144187049

Vue 3 引入了 Composition API，它提供了一种新的方式来组织和重用逻辑。Composition API 主要通过 setup 函数实现，这个函数在组件创建之前执行，返回的对象中的属性或方法可以在模板中使用。下面是一些关于如何使用 Composition API 的基本指南。

基础使用

首先，让我们看一个简单的例子，展示如何定义响应式数据、计算属性、监听器以及方法。

<template>
  <div>
    <p>{{ message }}</p>
    <button @click="increment">点击 {{ count }} 次</button>
  </div>
</template>

<script>
import { ref, computed, watch } from 'vue';

export default {
  setup() {
    // 定义响应式变量
    const count = ref(0);
    const message = ref('欢迎来到 Vue 3');

    // 计算属性
    const doubleCount = computed(() => count.value * 2);

    // 监听器
    watch(doubleCount, (newValue, oldValue) => {
      console.log(`doubleCount changed from ${oldValue} to ${newValue}`);
    });

    // 方法
    function increment() {
      count.value++;
    }

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

详细说明

ref：用于创建一个可变的响应式引用对象。ref 可以接受任何类型的值，并返回一个响应式的且可变的 ref 对象。
computed：用于创建计算属性。计算属性是基于它们的依赖进行缓存的，只有当其依赖发生变化时才会重新计算。
watch：用来观察并响应 Vue 实例上的数据变化。可以监听一个特定的数据源，并在该数据源变化时执行回调。
setup：这是一个特殊的选项，作为组合式 API 的入口点。它是一个生命周期钩子，在组件实例被创建之后立即调用。setup 返回的所有内容都会暴露给模板和其他选项。

生命周期钩子

Composition API 提供了类似于 Options API 的生命周期钩子，但这些钩子需要从 vue 中导入：

onBeforeMount
onMounted
onBeforeUpdate
onUpdated
onBeforeUnmount
onUnmounted
onErrorCaptured
onRenderTracked
onRenderTriggered

例如，使用 onMounted 在组件挂载后执行某些操作：

import { onMounted } from 'vue';

export default {
  setup() {
    onMounted(() => {
      console.log('Component has been mounted.');
    });

    // 其他逻辑...
  }
}

组合式函数

为了更好地复用逻辑，你可以将相关功能封装成组合式函数。这些函数通常接收一些参数（如 props 或上下文），并返回所需的响应式数据、计算属性或方法。

// useCounter.js
import { ref } from 'vue';

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

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

  return {
    count,
    increment
  };
}

然后在组件中使用：

import { useCounter } from './useCounter';

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

    return {
      count,
      increment
    };
  }
}

这样做的好处是可以清晰地分离关注点，使得代码更加模块化和易于维护。