5个 VueUse 库函数，让你工作效率翻倍(收藏！)

npm i @vueuse/core # yarn add @vueuse/core

<script src="https://unpkg.com/@vueuse/shared">script><script src="https://unpkg.com/@vueuse/core">script>

// 从 VueUse 导入的示例import { useRefHistory } from '@vueuse/core'

<template>  <p>     <button> Undo button>    <button> Redo button>  p>  <textarea v-model="text"/>template>
<script setup>import { ref } from 'vue'const text = ref('')script>
<style scoped>  button {    border: none;    outline: none;    margin-right: 10px;    background-color: #2ecc71;    color: white;    padding: 5px 10px;;  }style>

import { ref } from 'vue'import { useRefHistory } from '@vueuse/core'
const text = ref('')const { history, undo, redo } = useRefHistory(text)

<template>  <p>     <button @click="undo"> Undo button>    <button @click="redo"> Redo button>  p>  <textarea v-model="text"/>  <ul>    <li v-for="entry in history" :key="entry.timestamp">      {{ entry }}    li>  ul>template>
<script setup>import { ref } from 'vue'import { useRefHistory } from '@vueuse/core'const text = ref('')const { history, undo, redo } = useRefHistory(text)script>
<style scoped>  button {    border: none;    outline: none;    margin-right: 10px;    background-color: #2ecc71;    color: white;    padding: 5px 10px;;  }style>

//高级选项const { history, undo, redo } = useRefHistory(text, {  deep: true,  capacity: 10,})

<template>  <button @click="open = true"> Open Popup button>  <div class="popup" v-if='open'>    <div class="popup-content" ref="popup">      Lorem ipsum dolor sit amet consectetur adipisicing elit. Corporis aliquid autem reiciendis eius accusamus sequi, ipsam corrupti vel laboriosam necessitatibus sit natus vero sint ullam! Omnis commodi eos accusantium illum?    div>  div>template>
<script setup>import { ref } from 'vue'import { onClickOutside } from '@vueuse/core'const open = ref(false) // state of our popupconst popup = ref() // template ref// whenever our popup exists, and we click anything BUT itonClickOutside(popup, () => {  open.value  = false})script>
<style scoped>  button {    border: none;    outline: none;    margin-right: 10px;    background-color: #2ecc71;    color: white;    padding: 5px 10px;;  }  .popup {    position: fixed;    top: ;    left: ;    width: 100vw;    height: 100vh;    display: flex;    align-items: center;    justify-content: center;    background: rgba(, , , 0.1);  }  .popup-content {    min-width: 300px;    padding: 20px;    width: 30%;    background: #fff;  }style>

<template>    <div>        <input             type="text"             :value="data"            @input="update"        />    div>template>
<script>import { useVModel } from '@vueuse/core'export default {  props: ['data'],  setup(props, { emit }) {    const data = useVModel(props, 'data', emit)    console.log(data.value) // equal to props.data    data.value = 'name' // equal to emit('update:data', 'name')    const update = (event) => {        data.value = event.target.value    }    return {        data,        update    }  },}script>

<template>  <div>    <p> {{ data }} p>    <custom-input       :data="data"       @update:data="data = $event"    />  div>template>
<script>import CustomInput from './components/CustomInput.vue'import { ref } from 'vue'export default {  components: {    CustomInput,  },  setup () {    const data = ref('hello')    return {      data    }  }}

<template>  <p> Is target visible? {{ targetIsVisible }} p>  <div class="container">    <div class="target" ref="target">      <h1>Hello worldh1>    div>  div>template>
<script>import { ref } from 'vue'import { useIntersectionObserver } from '@vueuse/core'export default {  setup() {    const target = ref(null)    const targetIsVisible = ref(false)    const { stop } = useIntersectionObserver(      target,      ([{ isIntersecting }], observerElement) => {        targetIsVisible.value = isIntersecting      },    )    return {      target,      targetIsVisible,    }  },}script>
<style scoped>.container {  width: 80%;  margin:  auto;  background-color: #fafafa;  max-height: 300px;  overflow: scroll;}.target {  margin-top: 500px;  background-color: #1abc9c;  color: white;  padding: 20px;}style>

//useIntersectionObserver 的选项const { stop } = useIntersectionObserver(      target,([{ isIntersecting }], observerElement) => {        targetIsVisible.value = isIntersecting      },      {// root, rootMargin, threshold, window// full options in the source: https://github.com/vueuse/vueuse/blob/main/packages/core/useIntersectionObserver/index.ts        threshold: 0.5,      })

//停止 IntersectionObserverconst { stop } = useIntersectionObserver(      target,      ([{ isIntersecting }], observerElement) => {        targetIsVisible.value = isIntersecting        if (isIntersecting) {          stop()        }      },    )

// 使用转换代码<script setup>import { ref } from 'vue'import { useTransition, TransitionPresets } from '@vueuse/core'
const source = ref(0)
const output = useTransition(source, {  duration: 3000,  transition: TransitionPresets.easeOutExpo,})
source.value = 5000script>

<template>  <h2>     <p> Join over p>    <p> {{ Math.round(output) }}+ p>    <p>Developers p>  h2>template>
<script setup>import { ref } from 'vue'import { useTransition, TransitionPresets } from '@vueuse/core'const source = ref()const output = useTransition(source, {  duration: 3000,  transition: TransitionPresets.easeOutExpo,})source.value = 5000script>

<template><h2 :style="{ color: color } "> COLOR CHANGING h2>template><script setup>import { ref, computed } from 'vue'import { useTransition, TransitionPresets } from '@vueuse/core'const source = ref([, , ])const output = useTransition(source, {duration: 3000,transition: TransitionPresets.easeOutExpo,})const color = computed(() => {const [r, g, b] = output.valuereturn `rgb(${r}, ${g}, ${b})`})source.value = [255, , 255]script>