usePrevious

保存上一次状态的 Hook。

基础用法

counter current value：0

counter previous value：

基本用法记录上次的 count 值

复制成功!

<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>

自定义 shouldUpdate 函数

current name:

current age:

previous name:

previous age:

自定义 shouldUpdate 函数只有 shouldUpdate function 返回 true 时，才会记录值的变化

复制成功!

<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>

Result

参数	说明	类型
previousRef	上次 state 的值	Readonly<Ref<T>>

Params

参数	说明	类型	默认值
currentRef	需要记录变化的值	Ref<T> | ComputedRef<T>	-
shouldUpdate	可选，自定义判断值是否变化	(prev: T | undefined, next: T) => boolean	(a, b) => a !== b

Source

源码 · 文档 · 示例