다섯 가지 유용한 VueUse 기능을 공유하고 함께 사용해 보세요!
- 醉折花枝作酒筹앞으로
- 2021-08-13 17:39:163008검색
VueUse는 Anthony Fu의 오픈 소스 프로젝트로 Vue 개발자에게 Vue2 및 Vue3용 다양한 기본 Composition API 유틸리티 기능을 제공합니다.
참조 변경 추적, 요소 가시성 감지, 일반적인 Vue 패턴 단순화, 키보드/마우스 입력 등과 같은 일반적인 개발자 사용 사례를 위한 수십 가지 솔루션이 있습니다. 이는 개발 시간을 실제로 절약할 수 있는 좋은 방법입니다. 우리가 이러한 모든 표준 기능을 직접 추가할 필요 없이 그냥 사용하고 사용하기만 하면 되기 때문입니다(귀하의 노력에 다시 한번 감사드립니다).
저는 VueUse 라이브러리를 좋아합니다. 어떤 유틸리티를 제공할지 결정할 때 개발자를 최우선으로 생각하고, Vue의 현재 버전을 따라잡기 때문에 잘 관리되는 라이브러리이기 때문입니다.
VueUse의 실용적인 방법은 무엇입니까?
모든 유틸리티의 전체 목록을 보려면 공식 문서를 확인하는 것이 좋습니다. 하지만 요약하자면 VueUse에는 9가지 유형의 함수가 있습니다.
애니메이션 - 사용하기 쉬운 전환, 시간 초과 및 타이밍 기능 포함
브라우저 - 다양한 화면 컨트롤, 클립보드, 기본 설정 등과 함께 사용할 수 있음
Component(구성 요소) - 다양한 항목에 대한 약어 제공 구성 요소 메서드
센서(센서) - 다양한 DOM 이벤트, 입력 이벤트 및 네트워크 이벤트를 수신하는 데 사용됩니다.
State(상태) - 사용자 상태 관리(전역, 로컬 저장소, 세션 저장소)
유틸리티 (유틸리티 방법) - getter, 조건부, 참조 동기화 등과 같은 다양한 유틸리티 방법
Watch - 일시 중지 가능한 관찰자, 중단된 관찰자 및 조건부 관찰자와 같은 고급 관찰자 유형
기타 - 이벤트, WebSocket 및 웹 작업자를 위한 다양한 유형의 기능
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는 참조에 대한 모든 변경 사항을 추적하고 이를 배열의 a에 저장합니다. 이를 통해 애플리케이션에 실행 취소 및 다시 실행 기능을 쉽게 제공할 수 있습니다.
실행 취소할 수 있는 텍스트 영역을 만드는 예를 살펴보겠습니다
첫 번째 단계는 VueUse 없이 기본 구성 요소를 만드는 것입니다. ref, 텍스트 영역을 사용하고 실행 취소 및 다시 실행 버튼으로 구성됩니다.
<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를 통해 텍스트에서 기록, 실행 취소 및 다시 실행 속성을 추출합니다.
import { ref } from 'vue'
import { useRefHistory } from '@vueuse/core'
const text = ref('')
const { history, undo, redo } = useRefHistory(text)ref가 변경되고 기록 속성이 업데이트될 때마다 리스너가 트리거됩니다.
하단 레이어가 무엇을 하는지 확인하기 위해 히스토리 내용을 출력합니다. 그리고 해당 버튼을 클릭하면 실행 취소 및 다시 실행 기능을 호출합니다.
- {{ entry }}
이 기능에 더 많은 기능을 추가할 수 있는 다양한 옵션도 있습니다. 예를 들어 반응형 개체를 드릴다운하고 이와 같이 기록 레코드 수를 제한할 수 있습니다.
const { history, undo, redo } = useRefHistory(text, {
deep: true,
capacity: 10,
})onClickOutside off modal
onClickOutside는 요소 외부의 모든 클릭을 감지합니다. 내 경험에 따르면 이 기능의 가장 일반적인 사용 사례는 모달이나 팝업을 닫는 것입니다.
일반적으로 우리는 모달이 웹페이지의 나머지 부분을 차단하여 사용자의 주의를 끌고 오류를 제한하기를 원합니다. 그러나 모달 외부를 클릭하면 닫히기를 원합니다.
이를 수행하려면 두 단계만 거치면 됩니다.
감지하려는 요소에 대한 템플릿 참조 생성
이 템플릿 참조를 사용하여 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-모델 바인딩을 만드는 것입니다. 또한 이 값이 수정될 때마다 구성 요소가 값을 prop으로 허용해야 구성 요소가 상위 클래스에 업데이트 이벤트를 발생시킵니다.
useVModel 함수는 표준 ref 구문을 사용하여 이를 단순화합니다. 사용자 정의 텍스트 입력이 있고 해당 텍스트 입력 값에 대한 v-모델을 생성하려고 한다고 가정해 보겠습니다. 일반적으로 우리는 value prop을 받아들인 다음 상위 구성 요소의 데이터 값을 업데이트하기 위해 변경 이벤트를 발생시켜야 합니다.
ref를 사용하고 props.value 및 update:value를 호출하는 대신 useVModel을 사용하여 일반 참조로 처리할 수 있습니다. 이는 우리가 기억해야 하는 다양한 구문의 수를 줄이는 데 도움이 됩니다!
<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 중국어 웹사이트의 기타 관련 기사를 참조하세요!