中国建设质量安全协会网站,跨境电商平台网站,泰安爆炸最新消息今天,现在怎么做网络推广什么是“组合式函数”#xff1f; 在 Vue 应用的概念中#xff0c;“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。 当构建前端应用时#xff0c;我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间#xff0c;我们…什么是“组合式函数” 在 Vue 应用的概念中“组合式函数”(Composables) 是一个利用 Vue 的组合式 API 来封装和复用有状态逻辑的函数。 当构建前端应用时我们常常需要复用公共任务的逻辑。例如为了在不同地方格式化时间我们可能会抽取一个可复用的日期格式化函数。这个函数封装了无状态的逻辑它在接收一些输入后立刻返回所期望的输出。复用无状态逻辑的库有很多比如你可能已经用过的 loadsh 或是 date-fns。 相比之下有状态逻辑负责管理会随时间而变化的状态。一个简单的例子是跟踪当前鼠标在页面中的位置。在实际应用中也可能是像触摸手势或与数据库的连接状态这样的更复杂的逻辑。 鼠标跟踪器示例 如果我们要直接在组件中使用组合式 API 实现鼠标跟踪功能它会是这样的 script setup
import { ref, onMounted, onUnmounted } from vueconst 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))
/scripttemplateMouse position is at: {{ x }}, {{ y }}/template 但是如果我们想在多个组件中复用这个相同的逻辑呢我们可以把这个逻辑以一个组合式函数的形式提取到外部文件中 // mouse.js
import { ref, onMounted, onUnmounted } from vue// 按照惯例组合式函数名以“use”开头
export function useMouse() {// 被组合式函数封装和管理的状态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.jsconst { x, y } useMouse()
/scripttemplateMouse position is at: {{ x }}, {{ y }}/template 如你所见核心逻辑完全一致我们做的只是把它移到一个外部函数中去并返回需要暴露的状态。和在组件中一样你也可以在组合式函数中使用所有的组合式API。现在useMouse() 的功能可以在任何组件中轻易复用了。 更酷的是你还可以嵌套多个组合式函数一个组合式函数可以调用一个或多个其他的组合式函数。这使得我们可以像使用多个组件组合成整个应用一样用多个较小且逻辑独立的单元来组合形成复杂的逻辑。实际上这正是为什么我们决定将实现了这一设计模式的 API 集合命名为组合式 API。 举例来说我们可以将添加和清除 DOM 事件监听器的逻辑也封装进一个组合式函数中 // event.js
import { onMounted, onUnmounted } from vueexport function useEventListener(target, event, callback) {// 如果你想的话// 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素onMounted(() target.addEventListener(event, callback))onUnmounted(() target.removeEventListener(event, callback))
} 有了它之前的 useMouse() 组合式函数可以被简化为 // mouse.js
import { ref } from vue
import { useEventListener } from ./eventexport function useMouse() {const x ref(0)const y ref(0)useEventListener(window, mousemove, (event) {x.value event.pageXy.value event.pageY})return { x, y }
} 异步状态示例 useMouse() 组合式函数没有接收任何参数因此让我们再来看一个需要接收一个参数的组合式函数示例。在做异步数据请求时我们常常需要处理不同的状态加载中、加载成功和加载失败。 script setup
import { ref } from vueconst data ref(null)
const error ref(null)fetch(...).then((res) res.json()).then((json) (data.value json)).catch((err) (error.value err))
/scripttemplatediv v-iferrorOops! Error encountered: {{ error.message }}/divdiv v-else-ifdataData loaded:pre{{ data }}/pre/divdiv v-elseLoading.../div
/template 如果在每个需要获取数据的组件中都要重复这种模式那就太繁琐了。让我们把它抽取成一个组合式函数 // fetch.js
import { ref } from vueexport 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.jsconst { data, error } useFetch(...)
/script 接收响应式状态 useFetch() 接收一个静态 URL 字符串作为输入——因此它只会执行一次 fetch 并且就此结束。如果我们想要在 URL 改变时重新 fetch 呢为了实现这一点我们需要将响应式状态传入组合式函数并让它基于传入的状态来创建执行操作的侦听器。 举例来说useFetch() 应该能够接收一个 ref const url ref(/initial-url)const { data, error } useFetch(url)// 这将会重新触发 fetch
url.value /new-url 或者接收一个 getter 函数 // 当 props.id 改变时重新 fetch
const { data, error } useFetch(() /posts/${props.id}) 我们可以用 watchEffect() 和 toValue() API 来重构我们现有的实现 // fetch.js
import { ref, watchEffect, toValue } from vueexport function useFetch(url) {const data ref(null)const error ref(null)const fetchData () {// reset state before fetching..data.value nullerror.value nullfetch(toValue(url)).then((res) res.json()).then((json) (data.value json)).catch((err) (error.value err))}watchEffect(() {fetchData()})return { data, error }
} 约定和最佳实践 命名 组合式函数约定用驼峰命名法命名并以“use”作为开头。 输入参数 即便不依赖于 ref 或 getter 的响应性组合式函数也可以接收它们作为参数。如果你正在编写一个可能被其他开发者使用的组合式函数最好处理一下输入参数是 ref 或 getter 而非原始值的情况。可以利用 toValue() 工具函数来实现 import { toValue } from vuefunction useFeature(maybeRefOrGetter) {// 如果 maybeRefOrGetter 是一个 ref 或 getter// 将返回它的规范化值。// 否则原样返回。const value toValue(maybeRefOrGetter)
} 如果你的组合式函数在输入参数是 ref 或 getter 的情况下创建了响应式 effect为了让它能够被正确追踪请确保要么使用 watch() 显式地监视 ref 或 getter要么在 watchEffect() 中调用 toValue()。 返回值 你可能已经注意到了我们一直在组合式函数中使用 ref() 而不是 reactive()。我们推荐的约定是组合式函数始终返回一个包含多个 ref 的普通的非响应式对象这样该对象在组件中被解构为 ref 之后仍可以保持响应性 // x 和 y 是两个 ref
const { x, y } useMouse() 从组合式函数返回一个响应式对象会导致在对象解构过程中丢失与组合式函数内状态的响应性连接。与之相反ref 则可以维持这一响应性连接。 如果你更希望以对象属性的形式来使用组合式函数中返回的状态你可以将返回的对象用 reactive() 包装一次这样其中的 ref 会被自动解包例如 const mouse reactive(useMouse())
// mouse.x 链接到了原来的 x ref
console.log(mouse.x) Mouse position is at: {{ mouse.x }}, {{ mouse.y }} 副作用 在组合式函数中的确可以执行副作用 (例如添加 DOM 事件监听器或者请求数据)但请注意以下规则 如果你的应用用到了服务端渲染(SSR)请确保在组件挂载后才调用的生命周期钩子中执行 DOM 相关的副作用例如onMounted()。这些钩子仅会在浏览器中被调用因此可以确保能访问到 DOM。 确保在 onUnmounted() 时清理副作用。举例来说如果一个组合式函数设置了一个事件监听器它就应该在 onUnmounted() 中被移除 (就像我们在 useMouse() 示例中看到的一样)。当然也可以像之前的 useEventListener() 示例那样使用一个组合式函数来自动帮你做这些事。 使用限制 组合式函数只能在 script setup 或 setup() 钩子中被调用。在这些上下文中它们也只能被同步调用。在某些情况下你也可以在像 onMounted() 这样的生命周期钩子中调用它们。 这些限制很重要因为这些是 Vue 用于确定当前活跃的组件实例的上下文。访问活跃的组件实例很有必要这样才能 将生命周期钩子注册到该组件实例上 将计算属性和监听器注册到该组件实例上以便在该组件被卸载时停止监听避免内存泄漏。 script setup 是唯一在调用 await 之后仍可调用组合式函数的地方。编译器会在异步操作之后自动为你恢复当前的组件实例。 通过抽取组合式函数改善代码结构 抽取组合式函数不仅是为了复用也是为了代码组织。随着组件复杂度的增高你可能会最终发现组件多得难以查询和理解。组合式 API 会给予你足够的灵活性让你可以基于逻辑问题将组件代码拆分成更小的函数 script setup
import { useFeatureA } from ./featureA.js
import { useFeatureB } from ./featureB.js
import { useFeatureC } from ./featureC.jsconst { foo, bar } useFeatureA()
const { baz } useFeatureB(foo)
const { qux } useFeatureC(baz)
/script 在某种程度上你可以将这些提取出的组合式函数看作是可以相互通信的组件范围内的服务。 在选项式 API 中使用组合式函数 如果你正在使用选项式 API组合式函数必须在 setup() 中调用。且其返回的绑定必须在 setup() 中返回以便暴露给 this 及其模板 import { useMouse } from ./mouse.js
import { useFetch } from ./fetch.jsexport default {setup() {const { x, y } useMouse()const { data, error } useFetch(...)return { x, y, data, error }},mounted() {// setup() 暴露的属性可以在通过 this 访问到console.log(this.x)}// ...其他选项
} 与其他模式的比较 和 Mixin 的对比 Vue 2 的用户可能会对 mixins 选项比较熟悉。它也让我们能够把组件逻辑提取到可复用的单元里。然而 mixins 有三个主要的短板 不清晰的数据来源当使用了多个 mixin 时实例上的数据属性来自哪个 mixin 变得不清晰这使追溯实现和理解组件行为变得困难。这也是我们推荐在组合式函数中使用 ref 解构模式的理由让属性的来源在消费组件时一目了然。 命名空间冲突多个来自不同作者的 mixin 可能会注册相同的属性名造成命名冲突。若使用组合式函数你可以通过在解构变量时对变量进行重命名来避免相同的键名。 隐式的跨 mixin 交流多个 mixin 需要依赖共享的属性名来进行相互作用这使得它们隐性地耦合在一起。而一个组合式函数的返回值可以作为另一个组合式函数的参数被传入像普通函数那样。 基于上述理由我们不再推荐在 Vue 3 中继续使用 mixin。保留该功能只是为了项目迁移的需求和照顾熟悉它的用户。 和无渲染组件的对比 在组件插槽一章中我们讨论过了基于作用域插槽的无渲染组件。我们甚至用它实现了一样的鼠标追踪器示例。 组合式函数相对于无渲染组件的主要优势是组合式函数不会产生额外的组件实例开销。当在整个应用中使用时由无渲染组件产生的额外组件实例会带来无法忽视的性能开销。 我们推荐在纯逻辑复用时使用组合式函数在需要同时复用逻辑和视图布局时使用无渲染组件。 和 React Hooks 的对比 如果你有 React 的开发经验你可能注意到组合式函数和自定义 React hooks 非常相似。组合式 API 的一部分灵感正来自于 React hooksVue 的组合式函数也的确在逻辑组合能力上与 React hooks 相近。然而Vue 的组合式函数是基于 Vue 细粒度的响应性系统这和 React hooks 的执行模型有本质上的不同。
