vueUse部分用法解析二

2023-07-27 本文已影响0人焚心123

具体可上官网或者GitHub查看，这里解析部分源代码，欢迎一起交流学习(github代码中每个都有dome可进行查看)

vueUse中的返回值都是ref响应式数据

useCounter：计数器（提供加减，获取值，设置值，重置的方法）

可直接在页面中调用方法，也可以在js中二次调用

import { useCounter} from "@vueuse/core"

setup() {
    const { count, inc, dec, get, set, reset } = useCounter()
    count.value = 10 //设置初始化的值，默认值为0
    const setCount = () => {//js中调用设置的方法
      set((count.value += 10))
      console.log(get());//获取当前的值
    }
    return { count, inc, dec, set, reset, setCount }
  }

<div>
    <h4>{{ count }}</h4>
    <button @click="inc()">+</button>//页面中调用返回的加减方法
    <button @click="dec()">-</button>
    <button @click="setCount">设置2</button>
    <button @click="set(3)">设置</button>
    <button @click="reset()">重置</button>
  </div>

unrefElement:获取页面的dom元素

源码里使用了unref，如果参数是 ref，则返回内部值，否则返回参数本身。这是 val = isRef(val) ? val.value : val

import { unrefElement } from "@vueuse/core"
let div = ref(null)

const getDom = () => {
      const a = unrefElement(div)
      console.log(a)
    }
const getDom1 = () => {//也可以使用这种方式
      const dom = unref(div)
      console.log(dom)
    }
<div ref="div">我是元素</div>
 <button @click="getDom">获取元素dom</button>

useBase64：将元素转base64

import { useBase64 } from "@vueuse/core"

const { base64 } = useBase64("111111111")

<p> {{ base64 }}</p>

针对不同的类型做了不同的判断处理源码中(相信你们大致可以看的懂)

image.png

function blobToBase64(blob: Blob) {
  return new Promise<string>((resolve, reject) => {
    const fr = new FileReader()
    fr.onload = (e) => {
      resolve(e.target!.result as string)
    }
    fr.onerror = reject
    fr.readAsDataURL(blob)
  })
}

useCloned: 深度克隆（使用JSON.parse(JSON.stringify())）注意特殊引用类型不能使用

   import { useCloned } from "@vueuse/core"
    const a = [
      { title: "1", id: 1 },
      { title: "2", id: 2 },
    ]
    const { cloned, sync } = useCloned(a)
    const b = cloned
    a[1].id = 4
    a[1].title = "111"
    console.log(a, b)// [{title: '1', id: 1},{title: '111', id: 4}]----[{title: '1', id: 1},{title: '2', id: 2}]

useTitle：可动态的修改标题（搭配v-model）

   import { useTitle} from "@vueuse/core"

   const mes = useTitle("")

  {{ mes }}
  <input type="text" v-model="mes" />

useEventBus : 兄弟组件之间的传递跟mitt和vue2的bus一样的功能

在传递组件之中
import { useEventBus } from "@vueuse/core"
const bus = useEventBus("new");//通信之间的暗号
 bus.emit("我是传递消息的111")

在接收的兄弟组件中接收
import { useEventBus } from "@vueuse/core"
const bus = useEventBus("new");//通信之间的暗号
 const ss = (e) => {
      console.log(e, "11")
  }
 bus.on(ss)
这就完事了，但是我们不能一直让他们时时刻刻的说话，话多不好，所以要结束他们之间的通话
 bus.off(ss)
或者 const unsubscribe =  bus.on(ss)  unsubscribe ()
清除全部的通话
 bus.reset()

合理的使用off，reset等（要是同一个兄弟组件向其他两个组件中发送消息，在父中进行统一取消监听，你可以动手试试）
useNow: 获取当前的系统时间

 const { now, pause, resume } = useNow({ controls: true, interval: 2000 })

now, pause, resume 当前的时间，暂停动画，开始动画
controls: true, interval: 2000 两个参数，第一个是是否有动画的控件，第二个是动画的时间默认‘requestAnimationFrame’

useDateFormat：时间的格式化（可以搭配上面的useNow一起使用）这样展示的效果就是每秒都会进行变化

  const { now, pause, resume } = useNow({ controls: true })
  const date = useDateFormat(now, "YYYY-MM-DD HH:mm:ss")

useTimeAgo/formatTimeAgo:处理时间展示的格式，如2小时前，刚刚等，formatTimeAgo这个不是响应式的，useTimeAgo是响应式处理的要记得合理使用

效果

image.png

 const timeAgo1 = formatTimeAgo(new Date(2023, 6, 12));//也可以是时间戳

{{ timeAgo1 }}

默认是英文的提示语，这个我看有人提了pr，说是会在后面加一个独立的不会影响原有的功能，也有人提供了下面的一段自定义的代码

image.png
下面是我自己改的中文

  useTimeAgo() {
    const timeAgo = useTimeAgo(new Date(2024, 0, 1), {
      messages: {
        justNow: "刚刚",
        past: (n) => (n.match(/\d/) ? `${n}前` : n),
        future: (n) => (n.match(/\d/) ? `${n}后` : n),
        month: (n, past) => (n === 1 ? (past ? "上个月" : "下个月") : `${n}月`),
        year: (n, past) => (n === 1 ? (past ? "上一年" : "下一年") : `${n}年`),
        day: (n, past) => (n === 1 ? (past ? "昨天" : "明天") : `${n}天`),
        week: (n, past) => (n === 1 ? (past ? "上周" : "下周") : `${n}周`),
        hour: (n) => `${n}小时`,
        minute: (n) => `${n}分钟`,
        second: (n) => `${n}秒`,
        invalid: "",
      },
      //... Other options:
      showSecond: true,
    })
     return {
        timeAgo
      }
  }

toReactive: 可以将普通对象或者ref的对象转为reactive声明的响应式对象

    const ac = { c: 1 }
    const acc = ref({ foo: "3" })
    const aa = toReactive(ac)
    const ab = toReactive(acc)
    console.log(acc.value.foo, ab.foo, ac, aa.c)

源码中普通对象直接使用reactive进行包裹，ref的用proxy进行处理最后用reactive包裹

image.png

useFileDialog:打开文件

效果

image.png

const { files, open, reset, onChange } = useFileDialog()
{{ files }}
    <button type="button" @click="open">选择文件</button>
    <button type="button" @click="reset">重置</button>

useFileDialog这个api中还有三个可选参数，multiple是否多选，默认true，accept文件类型，默认所有，capture

vueUse部分用法解析二

猜你喜欢

热点阅读