首页 > 网络编程 > JavaScript > javascript类库 > vue.js > Vue 3.0 hooks

Vue 3.0 中 hooks 的概念示例详解

2024-10-24 12:11:47 作者：执键行天涯

在Vue3.0框架中,hooks函数允许将组件逻辑抽离复用,提高代码的可维护性和复用性,通过封装逻辑如获取数据、处理状态等,hooks使得组件开发更加高效和清晰,示例中,useDog.ts用于获取狗狗图片,展示了hooks封装数据和逻辑、响应式数据和异步操作的能力

背景：在一些情况下，前台的组件是可以复用的，那这些复用的对象和数据，为了避免直接写在一个vue文件中的混乱性，我们可以为每一个类型的内容，写成一个hooks，以便后面重复利用

一、示例

App.vue

<template>
  <Person/>
</template>
<script lang="ts" setup name="App"> //当前根组件的组件名
import Person from './components/Person.vue'
</script>
<style >
.app {
background-color: #ddd;
box-shadow: 0 0 10px;
border-radius: 10px;
padding: 20px;
}
</style>
**useSum.ts**
```html
import {ref,reactive, computed} from 'vue'
import axios from 'axios' 
export default function(){
let sum =ref(0);
let bigSum =computed(()=>{
    return sum.value*10;
})
function addSum(){
    sum.value+=1;
}
return {sum,addSum,bigSum}
}

useDog.ts

import {ref,reactive} from 'vue'
import axios from 'axios' 
 export default function(){
let dogList = reactive([
    'https://images.dog.ceo//breeds//pembroke//n02113023_11091.jpg'
]);
async function getDog(){
    try{
        let result = await axios.get('https://dog.ceo/api/breed/pembroke/images/random');
        dogList.push(result.data.message)
    }catch(error){
        alert(error);
    }
}
    return {dogList,getDog};
 }

Person.vue，在此vue中使用上面的两个组件；

<template>
    <div class="person">
      <h2>求和：{{sum}}====bigSum:{{bigSum}}</h2>
      <button @click="addSum">和加一</button>
      <hr/>
      <img v-for="(dog,index) in dogList" :key="index" :src="dog"><br/>
      <button @click="getDog"> 点我换小狗</button>
    </div>
</template>
<script lang="ts" setup name="Person">
import useDog from '@/hooks/useDog';
import useSum from '@/hooks/useSum';
let {dogList,getDog} = useDog();
let {sum,addSum,bigSum} = useSum();
</script>
<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}
li {
    font: 1em sans-serif;
}
img {
    height: 100px;
    margin-right: 10px;
}
</style>

展示效果

在这个例子中，很好地展示了 Vue 3.0 中 hooks 的概念及使用方式。

二、Vue 3.0 中 hooks 的概念

Hooks 是一组以 use 开头的函数，用于在 Vue 3 的函数式组件（使用 setup 函数的组件）中封装和复用有状态的逻辑。它们可以让开发者将组件中的逻辑提取出来，使得代码更加清晰、可维护和可复用。

主要特点包括：

逻辑封装：可以将特定的业务逻辑封装在一个 hook 函数中，例如获取数据、处理状态等。
可复用性：一个 hook 可以在多个组件中复用，避免了重复代码的编写。
清晰的代码结构：通过将相关逻辑集中在 hook 函数中，组件的代码更加简洁明了，易于理解和维护。

在这里解释一下例子中 hooks 的使用

useDog.ts中的 hook：
- 封装数据和逻辑：在 useDog.ts 中，定义了一个函数，这个函数实际上就是一个 hook。它封装了与获取狗狗图片相关的数据（dogList）和逻辑（getDog 函数用于获取随机狗狗图片的 URL 并添加到 dogList 中）。
- 响应式数据：使用 reactive 创建了响应式的 dogList，这样当 dogList 的内容发生变化时，使用这个数据的组件会自动更新视图。
- 异步操作：getDog 函数中使用 axios 进行异步请求获取随机狗狗图片的 URL，成功后将其添加到 dogList 中，如果出现错误则弹出错误提示。
在 Person.vue 中的使用：
- 引入 hook：通过 import useDog from '@/hooks/useDog'; 引入 useDog hook。
- 解构赋值：使用解构赋值 let { dogList, getDog } = useDog(); 获取 useDog hook 中返回的 dogList 和 getDog 函数。
- 模板中使用：在模板中，使用 v-for 遍历 dogList 来展示多个狗狗图片，并且通过点击按钮触发 getDog 函数来获取新的狗狗图片，从而更新视图。

综上所述，这个例子展示了 Vue 3.0 中 hooks 的强大功能，通过封装逻辑和数据，提高了代码的可维护性和可复用性，使得组件的开发更加高效和清晰。

到此这篇关于Vue 3.0 中 hooks 的概念的文章就介绍到这了,更多相关Vue 3.0 hooks内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

Vue 3.0 中 hooks 的概念示例详解

一、示例

二、Vue 3.0 中 hooks 的概念

您可能感兴趣的文章: