vue的hook使用以及案例

hook的基本使用

Vue3中的hook通常被称为Composition API，是Vue.js框架中的一个重要特性。它们的本质是一些可以在组件内部使用的函数，这些函数能够让你在不影响组件逻辑的情况下，增强和扩展组件的功能。

Hook的主要作用是允许在组件之间重用状态逻辑。类似于mixin

vue3中的hook和mixin的对比

Vue3中的hook（复用性函数）和mixin（混入）都是Vue.js中为实现逻辑复用和代码组织提供的机制。

不过，这两种方式有一些不同之处。以下是部分对比：

复用性：

mixin允许多个Vue组件共享JavaScript功能，但mixin内的生命周期函数不易理解，容易导致命名冲突。Vue3的hook则是以函数形式将可复用性内容提取出来，可解决命名冲突的问题。

逻辑相关性

由于mixin混入方法、生命周期函数中的逻辑可能散落在一整块的代码中，不方便管理与维护；而在Vue3中，hook更容易形成一块独立的、能够根据功能集中管理的代码。

类型支持

通过mixin混入的属性或方法，在类型系统中很难得到良好的支持。Vue3通过Composition API的hook，因其都是通过函数返回值主动暴露出来的，因此在TypeScript环境下有更好的类型推导支持。

逻辑组织

mixin无法将一个大的组件拆分为使用mixin的更小函数单元，而Vue3中的hook能够轻松实现这一点。

如何自定义Hooks

1. 它们以use开头。
2. 它们可以调用其他的hook。

如果我们编写的代码符合这两个约定，那么我们就可以编写自己的hook，然后在Vue组件中使用它。一般我们会在src文件夹下新建一个hooks文件夹，用于统一存放程序中用到的hooks代码

举例：

hook的编写：

export default function(){
 const hello=()=>{
    console.log("来自hook")
 }
 return{
    hello
 }
}

然后将他引入

<script>
import hook from '../js/hook';
export default {
    setup(){
      //引入并导出
        const{ hello }=hook()
        hello()
      
        return{
        hello
        }
    }

}
</script>

写一个local storage的hook

local.js

import{ref ,watch} from "vue"

export default function(key,value){
    const data =ref(value)
    if(value){
      //有value传入则写入数据，没有则是读取数据
        window.localStorage.setItem(key,JSON.stringify(value))
    }
    else{
        data.value=JSON.parse( window.localStorage.getItem(key))
    }
    	//监听数据的改变，如果改变了则重新写入数据
    watch(data,(newvalue)=>{
        window.localStorage.setItem(key,JSON.stringify(newvalue))
    })

    return{
        data
    }
} 

app.vue引入

<template>
  <h3>
    {{ setdata }}
<hr>
	{{ getdata.data.value.name }} 
  </h3>
  <button @click="change">改变 </button>
</template>

<script>
import home from "./home.vue"
import local from '../js/local';
export default {
    setup(){
      //写入数据
       const setdata =local("info",{
        name:"dls",
        age:21
       })
      //读取数据
        const getdata=local("info")
      //改变数据，其实本质就是改变的setdata的值
      //local内部的watch监测到了数据的改变，执行了写入方法
        const change=()=> setdata.data.value="改变了"
         console.log(getdata.data.value.name)   
      
        return{
         setdata,
         getdata,
         change,        
        }
    }

}
</script>

<style>

</style>