vue3学习-组合式函数

组合式函数

时一个利用vue的组件合适Api来封装和服用有状态逻辑的函数。

组合式函数只能在 <script setup> setup() 钩子中被调用。

它们也只能被同步调用。

如:抽取可复用的日期格式化函数

组合式函数以"use"开头

  1. 轻易复用
  2. 嵌套多个组合式函数
异步状态示例

在做异步数据请求时

js 复制代码
#fetch.js
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}
}

//使用
import { useFetch } form './fetch.js'
const {data, error } = useFetch('...')

那怎么再次发送请求呢?

我们可以用 watchEffect()toValue() API 来重构我们现有的实现

接受响应式状态
js 复制代码
const url = ref('url')
const  {data, error } = useFetch(url)
url.value = 'fff'//将会重新触发fetch
#或者 姐搜一个 getter函数

export function useFetch(url) {
    watchEffect(() => {
        fetch(toValue(url)).then((res) =>res.json )
        .then((json) => data.value = json)
        .catch((err) => {error.value = err})
    })
}
toValue() API

将可能的ref 或 getter 函数 解包

它的设计目的是将 ref 或 getter 规范化为值

如果参数是 ref,它会返回 ref 的值;如果参数是函数,它会调用函数并返回其返回值。

约定和实践
命名

组合式函数约定用驼峰命名法,并以"use"作为开头

输入参数
返回值

组合式函数始终返回一个包含多个 ref 的普通的非响应式对象, 这样该对象在组件中被结构为 ref之后仍可以保持响应性。

从组合式函数返回一个响应式对象会导致在对象解构过程中丢失与组合式函数内状态的响应性连接。

使用限制

组合式函数只能在 `` 或 setup() 钩子中被调用。在这些上下文中,它们也只能被同步 调用。在某些情况下,你也可以在像 onMounted() 这样的生命周期钩子中调用它们。

作用
  1. 将生命周期钩子注册到该组件实例上
  2. 将计算属性和监听器注册到该组件实例上,以便在该组件被卸载时停止监听,避免内存泄漏。
组合式函数和 Mixin 的对比
minxin
  1. 不清晰的数据来源:多个mixin时,实例的数据、追溯、理解组件的行为,变得空空
  2. 命名空间冲突:可能会注册相同的属性名,照成命名冲突
  3. 隐式的跨 mixin 交流:多个minix依赖共享属性名来进行相互作用
组合式函数
  1. 组合式函数中使用 ref + 结构模式,让属性的来源在消防组件时一目了然
  2. 通过在结构变量 时对变量进行重命名来避免相同的键名。
  3. 返回值可以作为另一个组合式函数的参数被传入,向普通函数这样
和无渲染组件的对比
相关推荐
用户51681661458411 天前
Vue Router 路由懒加载引发的生产页面白屏问题
vue.js·vue-router
前端缘梦1 天前
Vue Keep-Alive 组件详解:优化性能与保留组件状态的终极指南
前端·vue.js·面试
Simon_He1 天前
这次来点狠的:用 Vue 3 把 AI 的“碎片 Markdown”渲染得又快又稳(Monaco 实时更新 + Mermaid 渐进绘图)
前端·vue.js·markdown
王同学QaQ1 天前
Vue3对接UE,通过MQTT完成通讯
javascript·vue.js
华仔啊1 天前
基于 RuoYi-Vue 轻松实现单用户登录功能,亲测有效
java·vue.js·后端
艾小码1 天前
告别Vue混入的坑!Composition API让我效率翻倍的3个秘密
前端·javascript·vue.js
Gracemark2 天前
高德地图-地图选择经纬度问题【使用输入提示-使用Autocomplete进行联想输入】(复盘)
vue.js
天下无贼2 天前
【手写组件】 Vue3 + Uniapp 手写一个高颜值日历组件(含跨月补全+今日高亮+选中状态)
前端·vue.js
洋葱头_2 天前
vue3项目不支持低版本的android,如何做兼容
前端·vue.js
奔跑的蜗牛ing2 天前
Vue3 + Element Plus 输入框省略号插件:零侵入式全局解决方案
vue.js·typescript·前端工程化