vue3组合式函数

• 为什么引入？实现更好的状态复用（mixin）
• vue组合式函数 VS react的hook
• 跟着官网学习
• • 组合式API
  • 异步的数据请求例子
  • • 组合式
• 使用限制

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.pageXy.value = event.pageY}onMounted(() => window.addEventListener('mousemove',update))onUnmounted(() => window.removeEventListener('mousemove',updatereturn {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.pageXy.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、将计算属性和监听器注册到该组件实例上，以便在该组件被卸载时停止监听，避免内存泄漏

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！