Vue3第十三天,Vue3种如何自定义hook

Hook概念在React中特别常用,Vue3中将他的设计Hook的思想运用过来了,有人调侃的就说,javascript的发展史就是从面向过程->面向对象->面向过程。哈哈哈,实用才是最合适的。Hook里面将定义好多复用的方法或者变量。这靠我们在实践中多理解和使用才能更深入的了解设计Hook的初衷。类似于vue2.x中的mixin

useSum.ts中内容如下:

javascript 复制代码
import {ref,onMounted} from 'vue'

export default function(){
  let sum = ref(0)

  const increment = ()=>{
    sum.value += 1
  }
  const decrement = ()=>{
    sum.value -= 1
  }
  onMounted(()=>{
    increment()
  })

  //向外部暴露数据
  return {sum,increment,decrement}
}		

useDog.ts中内容如下:

javascript 复制代码
import {reactive,onMounted} from 'vue'
import axios,{AxiosError} from 'axios'

export default function(){
  let dogList = reactive<string[]>([])

  // 方法
  async function getDog(){
    try {
      // 发请求
      let {data} = await axios.get('https://dog.ceo/api/breed/pembroke/images/random')
      // 维护数据
      dogList.push(data.message)
    } catch (error) {
      // 处理错误
      const err = <AxiosError>error
      console.log(err.message)
    }
  }

  // 挂载钩子
  onMounted(()=>{
    getDog()
  })
	
  //向外部暴露数据
  return {dogList,getDog}
}

组件中具体使用:

xml 复制代码
<template>
  <h2>当前求和为:{{sum}}</h2>
  <button @click="increment">点我+1</button>
  <button @click="decrement">点我-1</button>
  <hr>
  <img v-for="(u,index) in dogList.urlList" :key="index" :src="(u as string)"> 
  <span v-show="dogList.isLoading">加载中......</span><br>
  <button @click="getDog">再来一只狗</button>
</template>

<script lang="ts">
  import {defineComponent} from 'vue'

  export default defineComponent({
    name:'App',
  })
</script>

<script setup lang="ts">
  import useSum from './hooks/useSum'
  import useDog from './hooks/useDog'
	
  let {sum,increment,decrement} = useSum()
  let {dogList,getDog} = useDog()
</script>

上面组件中的使用,是不是看起来一目了然,将来如果还要使用求和方法和属性的话,直接调用Hook函数就行,不是少了很多重复代码。

感谢大家观看

相关推荐
lichenyang4539 分钟前
从0开始的中后台管理系统-5(userList页面功能实现)
前端·javascript·vue.js
海域云SeaArea_15 分钟前
redis集群-本地环境
前端·bootstrap·html
LLLLYYYRRRRRTT1 小时前
MariaDB 数据库管理与web服务器
前端·数据库·mariadb
胡gh1 小时前
什么是瀑布流?用大白话给你讲明白!
前端·javascript·面试
universe_011 小时前
day22|学习前端ts语言
前端·笔记
teeeeeeemo1 小时前
一些js数组去重的实现算法
开发语言·前端·javascript·笔记·算法
Zz_waiting.1 小时前
Javaweb - 14.1 - 前端工程化
前端·es6
掘金安东尼1 小时前
前端周刊第426期(2025年8月4日–8月10日)
前端·javascript·面试
Abadbeginning1 小时前
FastSoyAdmin导出excel报错‘latin-1‘ codec can‘t encode characters in position 41-54
前端·javascript·后端
ZXT1 小时前
WebAssembly
前端