Vue 3 引入的 Composition API 提供了一系列组合函数，允许我们以一种更灵活和可维护的方式组织和重用组件逻辑。以下是一些常见的 Vue 3 组合函数及其示例：

1.ref和reactive

• ref 用于创建响应式引用，通常用于基本数据类型。
• reactive 用于创建响应式对象，适用于对象或数组等复杂数据类型。

ref示例

import { ref } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
  
    function increment() {  
      count.value++;  
    }  
  
    return {  
      count,  
      increment  
    };  
  }  
};

reactive示例

import { reactive } from 'vue';  
  
export default {  
  setup() {  
    const state = reactive({  
      name: 'Alice',  
      age: 30  
    });  
  
    function updateName(newName) {  
      state.name = newName;  
    }  
  
    return {  
      state,  
      updateName  
    };  
  }  
};

2.setup

setup示例

• setup 是 Composition API 的入口点，组件中使用的大多数组合函数都会在这里调用。setup 函数接收两个参数：props 和 context，并返回一个对象，该对象中的属性和方法可以在模板中使用。

import { ref } from 'vue';  
  
export default {  
  props: {  
    initialCount: {  
      type: Number,  
      required: true  
    }  
  },  
  setup(props) {  
    const count = ref(props.initialCount);  
  
    function increment() {  
      count.value++;  
    }  
  
    return {  
      count,  
      increment  
    };  
  }  
};

3.computed

computed示例

• computed 用于创建计算属性，基于其他响应式数据动态计算得到。

import { ref, computed } from 'vue';  
  
export default {  
  setup() {  
    const firstName = ref('John');  
    const lastName = ref('Doe');  
  
    const fullName = computed(() => {  
      return `${firstName.value} ${lastName.value}`;  
    });  
  
    return {  
      firstName,  
      lastName,  
      fullName  
    };  
  }  
};

4.watch和watchEffect

watch示例

• watch 用于侦听特定的响应式数据变化，并在变化时执行回调函数。
• watchEffect 会自动收集依赖并执行回调函数，当依赖发生变化时重新执行。

import { ref, watch } from 'vue';  
  
export default {  
  setup() {  
    const question = ref('');  
    const answer = ref('');  
  
    watch(question, (newQuestion, oldQuestion) => {  
      if (newQuestion === 'Who are you?') {  
        answer.value = 'I am Vue 3!';  
      }  
    });  
  
    return {  
      question,  
      answer  
    };  
  }  
};

watchEffect示例

import { ref, watchEffect } from 'vue';  
  
export default {  
  setup() {  
    const count = ref(0);  
    const double = computed(() => count.value * 2);  
  
    watchEffect(() => {  
      console.log(`Count doubled is ${double.value}`);  
    });  
  
    function increment() {  
      count.value++;  
    }  
  
    return {  
      count,  
      double,  
      increment  
    };  
  }  
};

5.provide和inject

provide和inject示例

• provide 和 inject 允许在父组件和子孙组件之间提供和注入依赖，实现了跨组件的数据传递。

// ParentComponent.vue  
import { provide, ref } from 'vue';  
  
export default {  
  setup() {  
    const theme = ref('dark');  
  
    provide('theme', theme);  
  
    return {  
      theme  
    };  
  }  
};  
  
// ChildComponent.vue  
import { inject } from 'vue';  
  
export default {  
  setup() {  
    const theme = inject('theme');  
  
    return {  
      theme  
    };  
  }  
};

6.useContext

useContext 并不是 Vue 3 的内置函数，但在某些场景下，你可能需要访问组件的上下文（context）。通常，你可以通过 setup 函数的第二个参数直接访问上下文。但如果你需要在一个自定义组合函数中访问上下文，你可以通过 useContext 自定义一个这样的函数。

7. 自定义组合函数

Vue 3 的强大之处在于它的灵活性和扩展性。你可以根据自己的需求创建自定义的组合函数。这些函数可以封装特定的逻辑，并在多个组件中重复使用。
自定义组合函数示例

import { ref } from 'vue';  
  
// 自定义一个用于处理表单输入的组合函数  
function useFormInput(initialValue) {  
  const value = ref(initialValue);  
  
  function setValue(newValue) {  
    value.value = newValue;  
  }  
  
  return {  
    value,  
    setValue  
  };  
}  
  
// 在组件中使用自定义组合函数  
export default {  
  setup() {  
    const { value, setValue } = useFormInput('');  
  
    function handleInputChange(event) {  
      setValue(event.target.value);  
    }  
  
    return {  
      value,  
      handleInputChange  
    };  
  }  
};

在这个示例中，我们创建了一个名为 useFormInput 的自定义组合函数，它接受一个初始值，并返回一个响应式的 value 和一个用于设置新值的 setValue 函数。然后，在组件的 setup 函数中，我们使用了这个自定义组合函数来处理表单输入。

8.useAttrs和useSlots

这两个函数允许你在 setup 函数中访问组件的属性（attrs）和插槽（slots）。这对于需要更细粒度控制组件属性和插槽的场景非常有用。
useAttrs和useSlots示例

import { useAttrs, useSlots } from 'vue';  
  
export default {  
  setup() {  
    const attrs = useAttrs();  
    const slots = useSlots();  
  
    // 你可以在这里根据 attrs 和 slots 做一些逻辑处理  
    // ...  
  
    return {  
      // 你可能想要将 attrs 或 slots 传递给子组件或其他地方  
      attrs,  
      slots  
    };  
  }  
};

这些只是 Vue 3 Composition API 的一掺用部分功能。