vue3自定义hook 如下：

Vue 3中引入了Composition API，它提供了一种新的方式来组织组件逻辑，并且可以使用自定义hook来重用逻辑。下面是一个简单的自定义hook示例：

javascript
import { ref } from 'vue'

export function useCounter(initialValue) {
  const count = ref(initialValue)

  function increment() {
    count.value++
  }

  function decrement() {
    count.value--
  }

  return {
    count,
    increment,
    decrement
  }
}

在这个例子中，我们定义了一个名为useCounter的自定义hook，它接受一个初始值作为参数，并返回一个包含计数器值和增加/减少计数器值的函数的对象。

我们可以在组件中使用这个自定义hook，如下所示：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <button @click="counter.increment">Increment</button>
    <button @click="counter.decrement">Decrement</button>
  </div>
</template>

<script>
import { useCounter } from './useCounter'

export default {
  setup() {
    const counter = useCounter(0)
    return {
      counter
    }
  }
}
</script>

在这个例子中，我们导入了useCounter自定义hook，并在setup函数中调用它，将返回的counter对象添加到组件的返回值中。然后，我们可以在模板中使用counter对象来显示计数器的值，并通过调用increment和decrement函数来更新计数器的值。

自定义hook是一个非常有用的功能，可以帮助我们在组件之间共享逻辑，并且可以使我们的代码更加模块化和可重用。