vue3中hooks的简单使用

一：hook意为钩子，其本质是一组可复用的函数。vue中的hook借鉴了React 16之后的一种新的函数式编程思维，在React中，Hooks提供了一系列以use开头的函数，允许开发者在函数式组件中完成生命周期、状态管理、逻辑复用等几乎全部组件开发工作。而在Vue 3中，Hooks结合了Vue的响应式系统，成为了一种强大的状态逻辑封装与复用机制。
二：简单实现如下:
如果不用hooks之前组件中的代码：

<template>
    <div>
        <p>{{count}}</p>
        <el-button @click="changeA">{{a}}</el-button>
        <p>{{b}}</p>
        <p >{{changeB}}</p>
    </div>
</template>
<script>
import { ref,computed} from 'vue'
export default {
    setup() {
	    const count = ref(0)
	    const a = ref(1)
	    const b = ref(2)
	    const changeA = ()=>{
	        a.value++
	    }
	    const changeB = computed(()=>{
	        return b.value*10
	    })
	    return{
	        count,a,b,changeA,changeB
	    }
    },
}
</script>

如果使用hooks的话：

1：新建js文件

import { ref,onMounted,computed} from 'vue'
export const numberData = ()=>{
    const count = ref(0)
    const a = ref(1)
    const b = ref(2)
    onMounted(()=>{
        console.log('onMounted')
    })
    const changeA = ()=>{
        a.value++
    }
    const changeB = computed(()=>{
        return b.value*10
    })
    return{
        count,a,b,changeA,changeB
    }
}

2：在组件中使用：

<template>
    <div>
        <p>{{count}}</p>
        <el-button @click="changeA">{{a}}</el-button>
        <p>{{b}}</p>
        <p >{{changeB}}</p>
    </div>
</template>
<script>
import {numberData} from '@/components/hooks/test.js'
export default {
    setup() {
        const {count,changeA,a,b,changeB} = numberData()
        return{
            count,a,b,changeA,changeB
        }
    },
}
</script>

效果展示：

没用hooks以前可以看出，如果多个页面同时使用，增加了代码冗余，使用hooks后，如果其他组件需要使用，我们只需要将其引入。这里只写了几段简单的代码，后期项目如果使用大量的共享数据和逻辑，尤其是多个组件共享的数据和逻辑时，通过将响应式变量进行封装，可以提高代码的可维护性和可读性。