VueUse 라이브러리의 useRef History의 새로운 기능 확장

저의 작은 기쁨을 함께 나누고 싶습니다. 히스토리 스냅샷에 지연 효과를 추가하여 기능 확장useRefHistory에 대한 나의 제안은 VueUse의 유지 관리자에 의해 수락되었습니다. 그들은 내가 풀 리퀘스트를 작성한다고 믿었습니다. 새로운 기능은 이미 VueUse에서 사용할 수 있습니다(버전 6.3.3부터). 그러나 가장 먼저 해야 할 일.

모험 이야기

내 에서 useRefHistory에 대해 썼고 응용 프로그램에서 구현하는 방법을 썼습니다. useRefHistory 함수를 사용하면서 사용성이 완벽하지 않다는 것을 알았습니다. 이 기능은 한 글자라도 작은 변화가 발생할 때마다 데이터의 스냅샷을 찍습니다. 긴 글이나 할 일 목록을 작성하다가 실수를 해서 변경 사항을 되돌리고 싶을 때 각 글자에 대해 Undo를 누르는 것은 매우 불편합니다. 약간의 시간 지연으로 변경 사항을 저장하는 것이 좋습니다.

해결책을 찾기 시작했습니다. 그것은 표면에있는 것 같습니다. 데이터 변경 사항을 모니터링하는 setTimeOut에 watch를 추가하면되지만 충분하지 않은 것으로 나타났습니다. watch 또한 undo 및 redo 메서드가 데이터에 수행하는 변경 사항을 건너뛸 필요가 있습니다. 그렇지 않으면 완전한 혼란이 발생합니다!!!

솔루션을 찾다가 VueUse 라이브러리 자체의 소스 코드를 찾게 되었습니다. 이러한 기능에 대한 메커니즘은 이미 작성자가 설정한 것으로 나타났습니다.

새 기능을 추가하라는 제안과 함께 VueUse 저장소에서 issue을 열었습니다. 유지 관리자 Anthony와 Patak은 매우 훌륭하고 전문적이었습니다. 그들은 내 아이디어를 지지했고 내가 풀 리퀘스트를 작성하도록 위임했습니다. 라이브러리의 스타일을 깨지 않고 가장 좋은 방법으로 구현하는 방법을 제안했습니다. 결과적으로 우리는 해결책을 찾았습니다.

코드 검토 및 일부 편집 후 pull 요청이 병합되었습니다. 현재 이미 새로운 기능을 사용할 수 있습니다. 이제 사용 방법을 알려 드리겠습니다.

useDebouncedRefHistory

useRefHistory 함수에서 내가 만든 주요 변경 사항은 이제 옵션 개체의 eventFilter 속성을 전달하여 함수의 동작을 변경할 수 있다는 것입니다. 필터는 실제로 배울 필요가 없는 라이브러리의 내부 도우미 구조입니다. VueUse에 대한 일부 코드를 스스로 제공하기로 결정하지 않는 한. 그럼 바로 실전으로 넘어가겠습니다.
useDebouncedRefHistory 지정된 지연으로 데이터 변경 기록을 기록합니다. 지연은 밀리초 단위로 설정되며 옵션 개체에 전달됩니다. ref 개체에 래핑될 수 있으며, 그러면 지연이 반응하게 됩니다.

<script lang="ts">
  import { defineComponent, ref } from "vue"
  import { useDebouncedRefHistory } from "@vueuse/core"

  export default defineComponent({
    setup() {
      const note = ref({
        title: "",
        todos: []
      })

      const { undo, redo, canUndo, canRedo, clear } = useDebouncedRefHistory(
        note,
        { deep: true, clone: true, debounce: 1000 }
      )

      return {
        note,
        undo,
        redo,
        canUndo,
        canRedo,
        clear
      }
    }
  })
</script>

useThrottledRefHistory

이 기능은 스로틀 효과만 있을 뿐 이전 기능과 유사합니다. 즉, 데이터가 변경된 시점과 지연 시간이 경과한 다음에는 이력이 저장됩니다. 사용자가 변경을 멈추지 않으면 1000밀리초마다 기록됩니다. 예를 들어:

<!-- setup in script - some syntactic sugar that will make your life easier-->
<script setup>
  import { ref } from "vue"
  import { useThrottledRefHistory } from "@vueuse/core"

  const delay = ref(1000)
  const count = ref(0)

  const { history, undo, redo, canUndo, canRedo } = useThrottledRefHistory(
    count,
    { throttle: delay }
  )
</script>

업데이트: (버전 6.4.0부터) 이제 새 속성trailing을 옵션(기본적으로 true)에서 사용할 수 있습니다. 시간 지연이 끝날 때 이력을 기록할지 여부를 결정합니다. 감시자가 첫 번째 변경에만 반응하고 주어진 시간 동안 관찰을 고정시키려면 trailing 를 false 로 설정하십시오. 이와 같이:

const DataHistory = useThrottledRefHistory(data, {
  throttle: 300,
  trailing: false
})

결론

보시다시피 변경 사항은 코드베이스와 논리에서 그리 방대하지 않지만 사용자 경험을 크게 향상시킵니다. 현명하게 사용하십시오.

우리는 모두 다른 사람의 작업을 사용하기 때문에 오픈 소스 프로젝트에 코드를 기여하는 것이 매우 중요합니다. 누구나 OS에 약간의 도움을 줄 수 있습니다. 이것이 우리 산업을 더욱 발전시키는 원동력입니다. 또한 세계 정상급 프로그래머들과 함께 일하고 약간의 경험을 계승할 수 있는 기회입니다.

결국, 전 세계 수천 명의 개발자가 귀하의 코드를 사용할 것이라는 사실을 알게 되어 기쁩니다.