Vue3组合式函数 - 18

Vue3的组合式函数，函数式组件，借鉴的 React 的 hooks，将复杂的逻辑拆分出不同的函数，方便以后对具体某个功能逻辑的修改

父组件：

要实现一个功能：点击按钮后，count + 1，且会将 count 的值变更为 document.title 

import useCount from "./18-useCount";
import useTitle from "./18-useTitle";

// useCount中，  count初始值0    handleClick点击事件，count+1
const { count, handleClick } = useCount();

// 将count值传入useTitle 将document的title改为count值
useTitle(count);

所以可以拆分出两个功能，一个是 count + 1 功能 ，一个是更改 document.title 的功能

功能 1 的子组件：

import {  ref } from "vue";
const useCount = () => {
    const count = ref(0);

    const handleClick = () => {
        count.value++;
    };
    return {
        count,
        handleClick
    }

}

export default useCount

功能 2 的子组件：

import { onMounted, onUpdated } from "vue";
const useTitle = (count) => {
    onMounted(() => {
        document.title = count.value;
    });

    onUpdated(() => {
        document.title = count.value;
    });
}

export default useTitle

所以可以将两个功能拆分成两个不同的函数组件，在父组件中调用，简化父组件逻辑，且方便以后部分代码逻辑的迭代