分享五個好用的VueUse函數，一起用起來吧！
- 醉折花枝作酒筹轉載
- 2021-08-13 17:39:163075瀏覽
VueUse是Anthony Fu大佬的開源項目，它為Vue的開發者提供了大量用於Vue2和Vue3的基本Composition API實用工具函數。
它有幾十個用於常見開發人員用例的解決方案，例如追蹤ref更改，檢測元素可見性，簡化常見Vue模式，鍵盤/滑鼠輸入等。這是真正節省開發時間的好方法，因為我們不必自己親手添加所有這些標準功能，拿來主義，用就對了(再次感謝大佬的付出)。
我喜歡VueUse函式庫，因為它在決定提供哪些實用工具時真正把開發者放在第一位，而且它是一個維護良好的函式庫，因為它與Vue的當前版本保持同步。
VueUse 有哪些實用方法？
如果你想看到每一個實用程式的完整列表，建議去看看官方文件。但總結一下，VueUse 中有9種類型的函數。
Animation(動畫) - 包含易於使用的過渡、逾時和計時功能
Browser (瀏覽器) - 可以用於不同的螢幕控制項、剪貼簿、首選項等等
Component (元件) - 為不同的元件方法提供簡寫
Sensors (感測器) - 用來監聽不同的DOM事件、輸入事件和網路事件
State (狀態) - 管理使用者狀態（全域，本地存儲，會話儲存）
Utility （實用方法）--不同的實用方法，如getters、conditionals、ref synchronization等。
Watch --更高級的觀察器類型，如可暫停的觀察器、放棄的觀察器和條件觀察器
其它- 事件、WebSockets和Web workers 的不同類型的功能
將Vueuse 安裝到Vue 專案中
#VueUse的最大特點之一是，它只用一個套件就能相容Vue2 和Vue3!
安裝VueUse有兩種選擇：npm或CDN
npm i @vueuse/core # yarn add @vueuse/core
<script src="https://unpkg.com/@vueuse/shared"></script> <script src="https://unpkg.com/@vueuse/core"></script>
推薦使用NPM，因為它更容易理解，但如果我們使用CDN, 可能透過window.VueUse 來存取。
使用npm，可以透過解構的方式來獲得想要的方法：
import { useRefHistory } from '@vueuse/core'useRefHistory 追蹤響應式資料的變化
#useRefHistory追蹤對ref 所做的每一個改變，並將其儲存在一個陣列中。這樣我們能夠輕鬆為應用程式提供撤銷和重做功能。
來看一個範例，在該範例中，我們做一個能夠撤銷的文字區域
第一步是在沒有VueUse 的情況下建立我們的基本元件--使用ref、 textarea、以及用來撤銷和重做的按鈕。
<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>接著，導入useRefHistory，然後透過 useRefHistory從 text 提取history、undo和redo屬性。
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)每當我們的ref發生變化，更新history屬性時，就會觸發一個監聽器。
為了看看底層做了什麼，我們把 history 內容印出來。並在單擊對應按鈕時呼叫 undo 和redo函數。
- {{ entry }}
還有不同的選項，為這個功能增加更多的功能。例如，我們可以深入追蹤 reactive 對象，並像這樣限制 history 記錄的數量。
const { history, undo, redo } = useRefHistory(text, {
deep: true,
capacity: 10,
})onClickOutside 關閉 modal
onClickOutside 偵測在一個元素以外的任何點擊。根據我的經驗，這個功能最常見的使用是關閉任何模態或彈出視窗。
通常，我們希望我們的模態屏蔽網頁的其餘部分，以吸引用戶的注意和限制錯誤。然而，如果他們確實點擊了模態之外，我們希望它關閉。
要做到這一點，只有兩個步驟。
為要偵測的元素建立一個模板參考
#使用這個模板ref運行onClickOutside
這是一個簡單的元件，使用onClickOutside彈出視窗。
<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 popup
const popup = ref() // template ref
// whenever our popup exists, and we click anything BUT it
onClickOutside(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>useVModel 簡化 v-model 的綁定。
Vue開發者的一個常見用例是為一個元件建立一個自訂的v-model綁定。這也要求我們的元件接受一個 value 作為 prop，每當這個 value 被修改，我們的元件就會向父類別發出一個 update 事件。
useVModel函數將其簡化為只使用標準的ref語法。假設我們有一個自訂的文字輸入，試圖為其文字輸入的值建立一個v-model。通常情況下，我們必須接受一個 value的 prop，然後發出一個 change 事件來更新父元件中的資料值。
我們可以使用useVModel，把它當作一個普通的ref，而不是使用ref並呼叫props.value和update:value。這有助於減少我們需要記住的不同語法的數量!
<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>每当需要访问value时，我们只需调用.value，useVModel将从我们的组件 props 中给我们提供值。而每当改变对象的值时，useVModel 会向父组件发出一个更新事件。
下面是父组件的一个简单示例
<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
}
}
}使用 intersectionobserver 跟踪元素的可见性
当确定两个元素是否重叠时，useIntersectionObserver 是非常强大的。这方面的一个很好的用例是检查一个元素在视口中是否当前可见。
基本上，它检查目标元素与根元素/文档相交的百分比。如果这个百分比超过了某个阈值，它就会调用一个回调，确定目标元素是否可见。
useIntersectionObserver提供了一个简单的语法来使用IntersectionObserver API。我们所需要做的就是为我们想要检查的元素提供一个模板ref。
默认情况下，IntersectionObserver将以文档的视口为根基，阈值为0.1--所以当这个阈值在任何一个方向被越过时，我们的交集观察器将被触发。
示例：我们有一个假的段落，只是在我们的视口中占据了空间，目标元素，然后是一个打印语句，打印我们元素的可见性。
<template>
<p> Is target visible? {{ targetIsVisible }} </p>
<div class="container">
<div class="target" ref="target">
<h1>Hello world</h1>
</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>运行后，对应的值会更新：
我们还可以为我们的 Intersection Observer 指定更多的选项，比如改变它的根元素、边距（计算交叉点时对根的边界框的偏移）和阈值水平。
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,
}
)同样重要的是，这个方法返回一个 stop 函数，我们可以调用这个函数来停止观察交叉点。如果我们只想追踪一个元素在屏幕上第一次可见的时候，这就特别有用。
在这段代码中，一旦targetIsVisible被设置为true，observer 就会停止，即使我们滚动离开目标元素，我们的值也会保持为 true 。
const { stop } = useIntersectionObserver(
target,
([{ isIntersecting }], observerElement) => {
targetIsVisible.value = isIntersecting
if (isIntersecting) {
stop()
}
},
)使用 useTransition 做个数字加载动画
useTransition是整个VueUse库中我最喜欢的函数之一。它允许我们只用一行就能顺利地在数值之间进行过渡。
我们可以通过三个步骤来做到这一点。
初始化一个 ref 变量 count ，初始值为 0
使用 useTransition 创建一个变量 output
改变 count 的值
import { ref } from 'vue'
import { useTransition, TransitionPresets } from '@vueuse/core'
const count = ref(0)
const output = useTransition(count , {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
count.value = 5000
</script>然后在 template 中显示 output 的值：
<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 count = ref(0)
const output = useTransition(count, {
duration: 3000,
transition: TransitionPresets.easeOutExpo,
})
count.value = 5000
</script>我们还可以使用useTransition 转换整个数字数组。 使用位置或颜色时，这非常有用。 使用颜色的一个很好的技巧是使用计算的属性将RGB值格式化为正确的颜色语法。
<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.value
return `rgb(${r}, ${g}, ${b})`
})
source.value = [255, , 255]
</script>总结
这不是VueUse的完整指南。这些只是我平常比较常用的函数，还有很多好用的函数，大家可以自行到官网去学习使用。
【相关推荐：《vue.js教程》】
以上是分享五個好用的VueUse函數，一起用起來吧！的詳細內容。更多資訊請關注PHP中文網其他相關文章！