feat: usePrevious

Author: NelsonYong

packages/hooks/docs/.vitepress/router.ts

@@ -13,6 +13,7 @@ const Router = [
       { text: 'useSessionStorageState', link: '/useSessionStorageState/' },
       { text: 'useMap', link: '/useMap/' },
       { text: 'useSet', link: '/useSet/' },
+      { text: 'usePrevious', link: '/usePrevious/' },
       { text: 'useSetState', link: '/useSetState/' },
     ],
   },

packages/hooks/src/index.ts

@@ -18,6 +18,7 @@ import useFetchs from './useFetchs'
 import useFullscreen from './useFullscreen'
 import useHover from './useHover'
 import usePreview from './usePreview'
+import usePrevious from './usePrevious'
 import useInterval from './useInterval'
 import useInfiniteScroll from './useInfiniteScroll'
 import useInViewport from './useInViewport'
@@ -78,6 +79,7 @@ export {
   useMouse,
   useNetwork,
   usePreview,
+  usePrevious,
   useSessionStorageState,
   useSet,
   useSetState,

packages/hooks/src/usePrevious/demo/demo.vue

@@ -0,0 +1,14 @@
+<template>
+  <div>
+    <p>counter current value：{{ counter }}</p>
+    <p>counter previous value：{{ prevCounter }}</p>
+    <vhp-button @click="inc()">increase</vhp-button>
+    <vhp-button @click="dec()" style="margin-left: 8px;">decrease</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { usePrevious, useCounter } from 'vue-hooks-plus'
+  const [counter, { inc, dec }] = useCounter(0)
+  const prevCounter = usePrevious(counter)
+</script>

packages/hooks/src/usePrevious/demo/demo1.vue

@@ -0,0 +1,65 @@
+<template>
+  <div style="border: 1px solid rgba(100, 126, 255, 0.7);border-radius: 12px; padding: 6px;">
+    <p>current name: {{ currentName }}</p>
+    <p>current age: {{ currentAge }}</p>
+  </div>
+  <br>
+  <div style="border: 1px solid rgba(59, 206, 128, 0.7);border-radius: 12px; padding: 6px;">
+    <p>previous name: {{ previousName }}</p>
+    <p>previous age: {{ previousage }}</p>
+  </div>
+  <br>
+  <div>
+    <input v-model="currentNameInput" placeholder="Input Name">
+    <vhp-button @click="handleUpdateName" style="margin-left: 8px;">Update</vhp-button>
+  </div>
+
+  <br>
+  <div>
+    <input v-model="currentAgeInput" placeholder="Input Age">
+    <vhp-button @click="handleUpdateAge" style="margin-left: 8px;">Update</vhp-button>
+  </div>
+</template>
+
+<script lang="ts" setup>
+  import { ref } from 'vue'
+  import { usePrevious } from 'vue-hooks-plus'
+
+  const currentNameInput = ref('')
+  const currentName = ref('')
+  const currentAgeInput = ref()
+  const currentAge = ref()
+
+  const nameCompareFunction = (prev: string | undefined, next: string) => {
+    if (!prev) {
+      return true
+    }
+    if (prev !== next) {
+      return true
+    }
+    return false
+  }
+
+  const ageCompareFunction = (prev: number | undefined, next: number) => {
+    if (!prev) {
+      return true
+    }
+    if (prev !== next) {
+      return true
+    }
+    return false
+  }
+
+  const previousName = usePrevious(currentName, nameCompareFunction)
+  const previousage = usePrevious(currentAge, ageCompareFunction)
+
+  const handleUpdateName = () => {
+    currentName.value = currentNameInput.value
+  }
+
+  const handleUpdateAge = () => {
+    currentAge.value = currentAgeInput.value
+  }
+</script>
+
+<style scoped lang="less"></style>

packages/hooks/src/usePrevious/index.en-US.md

@@ -0,0 +1,36 @@
+---
+map:
+  # 映射到docs的路径
+  path: /usePrevious
+---
+
+# usePrevious
+
+A Hook to return the previous state.
+
+## Basic usage
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="Basic usage"
+  desc="Record the previous value."> </demo>
+
+## Custom shouldUpdate function
+
+<demo src="./demo/demo1.vue"
+  language="vue"
+  title="Custom shouldUpdate function"
+  desc="Previous value update only when the shouldUpdate function return true."> </demo>
+
+## Result
+
+| Property    | Description        | Type     |
+| ----------- | ------------------ | -------- |
+| previousRef | The previous value | `Ref<T>` |
+
+## Params
+
+| Property | Description | Type | Default Value |
+| --- | --- | --- | --- |
+| currentRef | The state that needs to be tracked | `Ref<T>` \| `ComputedRef<T>` | - |
+| shouldUpdate | Optional. Customize whether the state value should be updated | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |

packages/hooks/src/usePrevious/index.ts

@@ -0,0 +1,23 @@
+import { ComputedRef, Ref, ref, watchEffect } from 'vue'
+
+export type ShouldUpdateFunc<T> = (prev: T | undefined, next: T) => boolean
+const defaultShouldUpdate = <T>(a?: T, b?: T) => !Object.is(a, b)
+
+function usePrevious<T>(
+  state: Ref<T> | ComputedRef<T>,
+  shouldUpdate: ShouldUpdateFunc<T> = defaultShouldUpdate,
+) {
+  const prevRef = ref<T>()
+  const curRef = ref<T>()
+
+  watchEffect(() => {
+    if (shouldUpdate(curRef.value, state.value)) {
+      prevRef.value = curRef.value
+      curRef.value = state.value
+    }
+  })
+
+  return prevRef
+}
+
+export default usePrevious

packages/hooks/src/usePrevious/index.zh-CN.md

@@ -0,0 +1,36 @@
+---
+map:
+  # 映射到docs的路径
+  path: /usePrevious
+---
+
+# usePrevious
+
+保存上一次状态的 Hook。
+
+## 基础用法
+
+<demo src="./demo/demo.vue"
+  language="vue"
+  title="基本用法"
+  desc="记录上次的 count 值"> </demo>
+
+## 自定义 shouldUpdate 函数
+
+<demo src="./demo/demo1.vue"
+  language="vue"
+  title="自定义 shouldUpdate 函数"
+  desc="只有 shouldUpdate function 返回 true 时，才会记录值的变化。"> </demo>
+
+## Result
+
+| 参数        | 说明            | 类型     |
+| ----------- | --------------- | -------- |
+| previousRef | 上次 state 的值 | `Ref<T>` |
+
+## Params
+
+| 参数 | 说明 | 类型 | 默认值 |
+| --- | --- | --- | --- |
+| currentRef | 需要记录变化的值 | `Ref<T>` \| `ComputedRef<T>` | - |
+| shouldUpdate | 可选，自定义判断值是否变化 | `(prev: T \| undefined, next: T) => boolean` | `(a, b) => a !== b` |