Vue3使用hook

title: Vue3使用hook id: ba1376b22973c935cacedf6f6f3ac845 tags:

• 前端开发

• vue date: 2024/10/23 15:36:41 updated: 2024/10/23 15:37:24 isPublic: true --#|[分隔]|#--

Vue3使用hook

使用hook还是比较简单的，不看不知道，一看就明白。

// useSomeData.ts

import { ref } from 'vue'

// hook，入参可选
export const useSomeData = (initNum?: number) => {
  const data = ref(initNum || 0) // 声明数据

  // 自增
  setInterval(() => {
    data.value++
  }, 1000);

  // 可选，暴露一个主动获取当前值的方法
  function getData() {
    return data.value
  }

  // 可选，暴露一个修改的方法
  function setData(newVal: number) {
    data.value = newVal
  }

  // 最终返回
  return { data, setData, getData }
}

使用方式，下面是在vue格式的文件中使用的示例，在普通js、ts中也可以使用，只是只能使用getData获取data数据。

<template>
  <div></div>
</template>

<script setup lang="ts">
import { watch } from 'vue'
// 引入hook
import { useSomeData } from './useSomeData.ts'

const { data, setData } = useSomeData()

// 监听、打印
watch(data, (newVal) => {
  console.log(newVal)
}, { immediate: true })

// 3秒后调用一下setData方法，检验方法是否正常
setTimeout(() => {
  setData(-30)
}, 3000);
</script>