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函数就行,不是少了很多重复代码。

感谢大家观看

相关推荐
再学一点就睡10 分钟前
初探 React Router:为手写路由筑牢基础
前端·react.js
悟空聊架构21 分钟前
5 分钟上手!Burp 插件「瞎越」一键批量挖垂直越权
前端
麦麦大数据24 分钟前
F010 Vue+Flask豆瓣图书推荐大数据可视化平台系统源码
vue.js·mysql·机器学习·flask·echarts·推荐算法·图书
炒毛豆1 小时前
vue3+antd实现华为云OBS文件拖拽上传详解
开发语言·前端·javascript
Pu_Nine_91 小时前
Axios 实例配置指南
前端·笔记·typescript·axios
红尘客栈21 小时前
Shell 编程入门指南:从基础到实战2
前端·chrome
前端大卫2 小时前
Vue 和 React 受控组件的区别!
前端
Hy行者勇哥2 小时前
前端代码结构详解
前端
练习时长一年3 小时前
Spring代理的特点
java·前端·spring
水星记_3 小时前
时间轴组件开发:实现灵活的时间范围选择
前端·vue