Vuejs + Lodash
Vuejs + Lodash
Rx계열의 프로그램을 접해본 사람들은 데이터 스크림을 효과적으로 다루는 map, reduce, filter, debounce 등의 함수를 통해 원하는 데이터를 효과적으로 취득하는 방법을 알고 있을 것이다.
Lodash 는 Rx 프로그래밍을 할때처럼 데이터(배열,컬렉션등)을 효과적으로 다룰수 있도록 도와주는 라이브러리이다.
Lodash는 일관된 모듈식 고성능 JavaScript 유틸리티 라이브러리이다. 대부분의 개발 요구 사항을 충족할 수 있는 풍부한 기능과 방법을 제공한다. 스캐폴딩을 통해 구축된 Vue 프로젝트에는 Lodash 도구 라이브러리가 설치되어 있어 직접 사용할 수 있다.
Lodash 공식 웹사이트: lodash.com/
lodash 에는 정말 많은 기능들이 탑재되어 있어서, array, collection, data 등의 데이터를 쉽고 간편하게 다룰수있도록 해준다.
Arry관련 함수로는 findIdnex, flatten,remove등과 Collection관련 함수로는 every, find,filter,map, reduce 등을 지원한다.
Array: 데이터 채우기, 요소 찾기, 배열 슬라이싱 및 기타 작업과 같은 배열 유형에 적합
Collection: 배열 및 객체 유형에 적용 가능하며 그룹화, 검색, 필터링 및 기타 작업과 같은 문자열에 부분적으로 적용 가능
Function: 조절, 지연, 캐싱, 후크 설정 등과 같은 기능 유형에 적합
Lang: 다양한 유형에 보편적으로 적용 가능하며 유형 판단 및 유형 변환을 수행하는 데 자주 사용
Math: 숫자 유형에 적합하며 종종 수학 연산을 수행하는 데 사용
Number: 난수를 생성하고 숫자 값과 숫자 간격의 관계를 비교하는 데 적합
Object: 객체 유형에 적용 가능하며 객체 생성, 확장, 유형 변환, 검색, 수집 및 기타 작업에 자주 사용.
Seq: 체인 호출을 생성하고 실행 성능을 향상시키는 데 자주 사용(지연 계산).
String: 문자열 유형에 적합
사용법
Lodash의 첫 번째 소개 방법을 사용 import _ from 'lodash'하거나 import { xx } from 'lodash'. 그런 다음 해당 메서드를 사용하려면 직접 _.xx호출 하면 된다 xx(). 아래 debounce 예를 들어보겠다 `
<template>
<div
class="edit-input"
:style="{'font-size':fontSize}"
v-html="innerText"
:contenteditable="isEdit"
@focus="isLock = true"
@blur="onBlur"
@input="changeText"
>
</div>
</template>
<script>
import _ from 'lodash'
// import { debounce } from 'lodash'
/*
props: {
value: {
type: String,
},
},
data() {
return { handleInput: null, }
},
mounted() {
this.handleInput = debounce(function (e) {
console.log('value', e.target.value) this.$emit('input', e.target.value)
}, 1000)
},
*/
export default {
methods: {
changeText:_.debounce(function(e){
this.$emit('input',e.target.innerText);
}, 500)
}
}
</script>
또는
0 comments:
댓글 쓰기