feat(hooks): add usePrevious hook

README.md

@@ -48,6 +48,7 @@ export default createComponent({
 - [`useDate`](./src/useDate.ts) — Using [`dayjs`](https://github.com/iamkun/dayjs) to process date.
 - [`useWindowSize`](./src/useWindowSize.ts) — Tracks `window` dimensions.
 - [`useCounter`](./src/useCounter.ts) — Tracks state of a number.
+- [`usePrevious`](./src/usePrevious.ts) — Returns the previous state or props.
 - [`useRouter`](./src/useRouter.ts) — A hook for [`vue-router`](https://github.com/vuejs/vue-router).
 - [`useStore`](./src/useStore.ts) — A hook for [`vuex`](https://github.com/vuejs/vuex).
 - [`useState`](./src/useState.ts) — A hook for [`mapState`](https://vuex.vuejs.org/api/#mapstate).

src/__tests__/usePrevious.test.ts

@@ -0,0 +1,34 @@
+import Vue from 'vue';
+import { value } from 'vue-function-api';
+import usePrevious from '../usePrevious';
+import renderHook from '../util/renderHook';
+
+describe('usePrevious', () => {
+  it('should be defined', () => {
+    expect(usePrevious).toBeDefined();
+  });
+
+  it('should be previous count', () => {
+    renderHook(() => {
+      const count = value(0);
+      const prevCount = usePrevious(count);
+
+      expect(count.value).toBe(0);
+      expect(prevCount.value).toBeUndefined();
+
+      count.value += 1;
+
+      Vue.nextTick().then(() => {
+        expect(count.value).toBe(1);
+        expect(prevCount.value).toBe(0);
+
+        count.value -= 1;
+
+        Vue.nextTick().then(() => {
+          expect(count.value).toBe(0);
+          expect(prevCount.value).toBe(1);
+        });
+      });
+    });
+  });
+});

src/index.ts

@@ -5,6 +5,7 @@ export * from './useDate';
 export { default as useDate } from './useDate';
 export { default as useWindowSize } from './useWindowSize';
 export { default as useCounter } from './useCounter';
+export { default as usePrevious } from './usePrevious';
 export { default as useStore } from './useStore';
 export { default as useState } from './useState';
 export { default as useGetters } from './useGetters';

src/usePrevious.ts

@@ -0,0 +1,11 @@
+import { value, watch, Wrapper } from 'vue-function-api';
+
+export default function usePrevious<T>(state: Wrapper<T> | T) {
+  const previous = value<T | undefined>(undefined);
+
+  watch('value' in state ? state : () => state, (_, oldVal) => {
+    previous.value = oldVal;
+  });
+
+  return previous;
+}