【vue3】组合式函数

本文主要参考vue.js官网和掘金中这篇文章https://juejin.cn/post/7066951709678895141；

vue3中提出了关于组合式函数的方法，与react中的hooks相同功能，

• hooks:系统运行到某一时期，会调用注册到该时机的回调函数

比较常见的钩子有：windows 系统的钩子能监听到系统的各种事件，浏览器提供的 onload 或 addEventListener 能注册在浏览器各种时机被调用的方法

为什么引入？实现更好的状态复用（mixin）

-一系列以 “use” 作为开头的方法，它们提供了让你可以完全避开 class式写法，在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作的能力。

组合式函数的优点

• 方法和属性好追溯吗？这可太好了，谁产生的，哪儿来的一目了然。
• 会有重名、覆盖问题吗？完全没有！内部的变量在闭包内，返回的变量支持定义别名。
• 多次使用，没开N度？你看上面的代码块内不就“梅开三度” 了吗？

// 单个name的写法
const { name, setName } = useName();

// 梅开二度的写法
const { name : firstName, setName : setFirstName } = useName();

const { name : secondName, setName : setSecondName } = useName();

vue组合式函数 VS react的hook

• 相似点： 总体思路是一致的 都遵照着 “定义状态数据”，“操作状态数据”，“隐藏细节” 作为核心思路。
• vue3 的组件里， setup 是作为一个早于 “created” 的生命周期存在的，无论如何，在一个组件的渲染过程中只会进入一次。
• React函数组件 则完全不同，如果没有被 memorized，它们可能会被不停地触发，不停地进入并执行方法，因此需要开销的心智相比于vue其实是更多的。

跟着官网学习

需要复用公共任务的逻辑，例如跟踪当前鼠标在页面中的位置，这些状态逻辑负责管理会随时间而变化的状态。

组合式API

直接在组件中使用组合式API实现鼠标跟踪功能，如下所示

<script >
import {ref, onMounted, onUnmounted} from 'vue'

setup(){
    const x = ref(0);
    const y = ref(0);

    function update(event){
        x.value = event.pageX
        y.value = event.pageY
    }
    onMounted(() => window.addEventListener('mousemove',update))
    onUnmounted(() => window.removeEventListener('mousemove',update
    return {
        x,
        y,
    }
}
</script>

<template>Mouse position is at: {{ x }},{{ y }}</template>

如果想在很多组件中复用这个逻辑呢？（注意不是复用组件，是逻辑）,我们就可以通过组合式函数的形式提取到外部文件中

import {ref, onMounted, onUnmounted } from 'vue'

export function useMounse(){
    const x = ref(0);
    const y = ref(0);

    function update(event) {
        x.value = event.pageX
        y.value = event.pageY
    }

    onMounted(() => window.addEventListener('mousemove',update))
    onUnmounted(() => window.removeEventListener('mousemove',update));

    return {x,y}
}

在组件中进行使用

<script setup>
import {useMouse} from './mouse.js'

const{x,y} = useMouse()

</script>

<template> Mouse position is at: {{ x }}, {{ y }}</template>

进行这样的封装后，你就可以轻松在任意组件使用这个功能了，还可以嵌套多个组合式函数：

• 一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样，用多个较小且逻辑独立的单元来组合形成复杂的逻辑。实际上，这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式 API。

异步的数据请求例子

useMouse() 组合式函数没有接收任何参数，因此让我们再来看一个需要接收一个参数的组合式函数示例。在做异步数据请求时，我们常常需要处理不同的状态：加载中、加载成功和加载失败。

组合式

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

const data = ref(null)
const error = ref(null)

fetch('...')
    .then((res) => res.json())
    .then((json) => (data.value = json))
    .catch((err) => (error.value = err))
</script>


<template>
  <div v-if="error">Oops! Error encountered: {{ error.message }}</div>
  <div v-else-if="data">
    Data loaded:
    <pre>{{ data }}</pre>
  </div>
  <div v-else>Loading...</div>
</template>

如果在每个需要获取数据的组件中都要重复这种模式，那就太繁琐了。让我们把它抽取成一个组合式函数：

//异步状态例子

import { ref } from 'vue'

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)

    fetch(url)
     .then((res) => res.json())
     .then((json) => (data.value = json))
     .catch((err) => (error.value = err))

     return {data,error}
}

现在在组件引用只需要

<script setup>
import { useFetch } from './fetch.js'

const { data, error } = useFetch('...')
</script>

useFetch() 接收一个静态的 URL 字符串作为输入，所以它只执行一次请求，然后就完成了。但如果我们想让它在每次 URL 变化时都重新请求呢？那我们可以让它同时允许接收 ref 作为参数

import {ref, isRef, unref, watchEffect} from 'vue'

export function useFetch(url) {
    const data = ref(null)
    const error = ref(null)

    function doFetch() {
        //在请求之前重置状态
        data.value = null;
        error.value = null;

        fetch(unref(url))
         .then((res) => res.json())
         .then((json) => (data.value = json))
         .catch((err) => (error.value = err))
    }

    if(isRef(url)){
        watchEffect(doFetch)
    }else{
        doFetch();
    }

    return {data, error}
}

使用限制

组合式函数在

这个限制是为了让 Vue 能够确定当前正在被执行的到底是哪个组件实例，只有能确认当前组件实例，才能够：

• 1、将生命周期钩子注册到该组件实例上
• 2、将计算属性和监听器注册到该组件实例上，以便在该组件被卸载时停止监听，避免内存泄漏