Vue3 之hooks 使用详解教程

一、基本使用

<template>
    <view>
        {{params}}
        <button @click="goUrl('/pages/index/index')">跳转</button>
    </view>
</template>

<script>
    import {
        ref,
        onMounted
    } from 'vue';
    import {
        onShow,
        onLoad
    } from '@dcloudio/uni-app';
    import useTest from '@/hooks/test.js';
    export default {
        setup() {
            const {
                params,
                goUrl
            } = useTest();

            onMounted(() => {
                console.log('onMounted')
            })
            
            onLoad((options) => {
                params.keyword = 'hooks';
                console.log(options)
            })
            
            onShow(() => {
                console.log('hooks onShow')
            })

            return {
                params,
                goUrl
            }
        }
    }
</script>

<style>
</style>

hooks

import {ref, reactive} from 'vue'

export default function() {
    const title = ref('title2');
    
    const params = reactive({
        page: 1,
        keyword: '',
        isEnd: false
    })
    
    function testFunc() {
        console.log('testFunc')
    }
    
    function goUrl(url) {
        uni.navigateTo({
            url: url
        })
    }
    
    return {
        title,
        params,
        testFunc,
        goUrl
    }
}