vue-cli

• vue create project

vue3

• composition api

• ref,computed

import {ref,computed} from 'vue'

export default {
    setup(){
        const count = ref(0)
        const double = computed(()=>{
            return count.value * 2
        })
        const add = ()=>{
            return count.value ++;
        }
        return {
            count,
            add,
            double
        }
    }
}

• reactive 响应式对象
• 生命周期
• watch
• slot
• emit
• teleport
• Suspense
  • setup 返回一个promise 的组件

loading hooks

// useLoadingHooks.ts

import {ref} from 'vue'
import axios from 'axios'

const useLoading = <T>(url: string)=>{

    const loading = ref(true);
    const loaded = ref(false);
    const result = ref<T | null>(null);
    const error = ref(null);
    
    axios.get(url).then(res=>{
        result.value = res.data;
        loading.value = false;
        loaded.value = true;
    }).catch(err=>{
        loading.value = false;
        loaded.value = true;
        error.value = err;
    })
    
    return {
        loading,
        loaded,
        result,
        error
    }
    
}

export default useLoading;
//---------------------------------------------------------------
// app.vue
<template>
    <div v-if="loading">loading</div>
    <img v-if="loaded" :src="result.message" alt="" />
</template>

<script lang='ts'>
import {defineComponent} from 'vue'
import useLoading from './hooks/useLoadingHooks.ts';

interface ResultData {
  message: string;
  status: string;
}

export default defineComponent({
    setup(){
        const {loading,loaded,result,error} = useLoading<ResultData>('https://dog.ceo/api/breeds/image/random');  
        return {
            loading,loaded,result,error
        }
    }
})

</script>