vue3(hooks)

vue3的hooks相当于是封装公共方法的js文件

/**计数器+-方法的hooks文件**/
import { ref } from 'vue'
export default function() {
    const counter = ref(0)
    const increment = () => {
        counter.value++
    }
    const devrement = () => {
        counter.value--
    }

    return {
        counter,
        increment,
        devrement
    }
}

引入以及使用方法如下

<template>
    <div>
        <h1>我的名字是:{{info.name}}</h1>
        <h1>我的年龄是:{{info.age}}</h1>
        <h1>当前计数为:{{counter}}</h1>
        <button @click="increment">点击加一</button>
        <button @click="devrement">点击减一</button>
    </div>
</template>

<script>  //这里也可以使用setup语法糖写法
import { reactive } from 'vue';
//引入hooks文件 文件名当作变量名
import useCounter from '../hooks/useCounter.js';
export default {
    setup(){
        const info = reactive({name:'dxx',age:18})
        //将hooks文件里的方法和变量全部解构出来使用
        const { counter, increment, devrement } = useCounter()
        //最后将方法和变量导出
        return {
            info,
            counter,
            increment,
            devrement
        }
    }
}
</script>