vue3hooks的使用

发布时间:2024年01月13日

在 Vue 3 中,hooks 是用于封装组件逻辑的方法,类似于 Vue 2 中的 mixins。

使用 Hooks 可以提高代码的可维护性、可读性、可复用性和可测试性,降低代码之间的耦合度,使得组件的状态更加可控和可预测。

要使用 hooks,你需要先创建一个 hook 文件夹,并在其中定义一系列以 "use" 开头的方法。这些方法可以提供组件的复用和状态管理等开发能力。

下面是一个简单的例子,展示了如何使用 hooks:

  1. 在你的项目目录下创建一个新的文件,例如?useSum.ts

  2. 在useSum.ts中

  3. import { ref } from 'vue'
    
    export default function () {
        let sum = ref(1000)
    
        function add() {
            sum.value += 1000
        }
    
        return { sum, add }
    }

  4. 在你的组件中,使用这个 hook:

  5. <template>
        <div class="content">
            {{ sum }}
            <button @click="add">+1000</button>
        </div>
    </template>
    
    <script lang="ts" setup>
    
    import useSum from '@/hooks/useSum'
    
    const {sum ,add } = useSum()
    
    </script>

文章来源:https://blog.csdn.net/H2608520347/article/details/135522755
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。