047Vue3组合式函数代替Mixin

组合式函数示例

// 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 }
}

组合式函数示例（进一步拆分）

// event.js
import { onMounted, onUnmounted } from 'vue'export function useEventListener(target, event, callback) {// 如果你想的话，// 也可以用字符串形式的 CSS 选择器来寻找目标 DOM 元素onMounted(() => target.addEventListener(event, callback))onUnmounted(() => target.removeEventListener(event, callback))
}

// mouse.js
import { ref } from 'vue'
import { useEventListener } from './event'export function useMouse() {const x = ref(0)const y = ref(0)useEventListener(window, 'mousemove', (event) => {x.value = event.pageXy.value = event.pageY})return { x, y }
}

组合函数的调用

<script setup>
import { useMouse } from './mouse.js'const { x, y } = useMouse()
</script><template>Mouse position is at: {{ x }}, {{ y }}</template>

含参数的组合函数

// fetch.js
import { ref, isRef, unref, watchEffect } from 'vue'export function useFetch(url) {const data = ref(null)const error = ref(null)function doFetch() {// 在请求之前重设状态...data.value = nullerror.value = null// unref() 解包可能为 ref 的值fetch(unref(url)).then((res) => res.json()).then((json) => (data.value = json)).catch((err) => (error.value = err))}if (isRef(url)) {// 若输入的 URL 是一个 ref，那么启动一个响应式的请求watchEffect(doFetch)} else {// 否则只请求一次// 避免监听器的额外开销doFetch()}return { data, error }
}

调用办法

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

组合函数的最佳实践

组合式函数约定用驼峰命名法命名，并以“use”作为开头
输入参数的unref()，去掉不必要的响应
组合式函数中返回值使用 ref() 而不是 reactive()

047Vue3组合式函数代替Mixin相关推荐

Vue3的组合式函数
简言今天来学习下vue3组合式函数用法,先甩官方链接:组合式函数. vue2的时候,以一个vue文件是按照vue给的模块文件来写的,也就是选项式API写法(一个文件里有template.script ...
【vue3】组合式函数
vue3组合式函数为什么引入?实现更好的状态复用(mixin) vue组合式函数 VS react的hook 跟着官网学习组合式API 异步的数据请求例子组合式使用限制本文主要参考vue.j ...
Vue——组合式函数
目录什么是"组合式函数"? 鼠标跟踪器示例异步状态示例约定和最佳实践命名输入参数返回值副作用使用限制通过抽取组合式函数改善代码结构选项式 AP ...
Vue3组合式函数最佳实践（一）
截至目前,组合式函数应该是在VUE 3应用程序中组织业务逻辑最佳的方法. 它让我们可以把一些小块的通用逻辑进行抽离.复用,使我们的代码更易于编写.阅读和维护. 由于这种编写VUE代码的方式相对较新,因 ...
作为函数的mixin
在一个 mixin 内部定义的变量或 mixin,都调用者可见,因此,它们可以作为它的返回值.如,以下Less代码: .count(@x, @y) { @sum:(@x + @y); ...
vue2的动画,混入Mixin,插件,指令,渲染函数,响应式,MVVM
文章目录过渡 & 动画 Transition 组件基于 CSS 的过渡效果 CSS 过渡类名 class 为过渡效果命名 CSS 过渡 transition 实例1: 实例2: CSS 动 ...
vue3组合式api
文章目录组合式API介绍什么是组合式 API? 为什么要有组合式 API? 更好的逻辑复用更灵活的代码组织 Option Api Option Api的缺陷 Composition Api 更好 ...
[译] ES6+ 中的 JavaScript 工厂函数（第八部分）
本文讲的是[译] ES6+ 中的 JavaScript 工厂函数(第八部分), 原文地址:JavaScript Factory Functions with ES6+ 原文作者:Eric Elliot ...
详细分析 Vue3 文档
之前我就在想,为什么很多人遇到问题都是推荐说:看文档为什么? 因为文档真的很有用(真香) 这篇文章是个人对于文档中出现内容的理解,在断断续续的一周时间内看一次文档后,compisition API真 ...

047Vue3组合式函数代替Mixin

047Vue3组合式函数代替Mixin

组合式函数示例

组合式函数示例（进一步拆分）

组合函数的调用

含参数的组合函数

调用办法

组合函数的最佳实践

047Vue3组合式函数代替Mixin相关推荐

最新文章

热门文章