vue 单文件组件最佳实践

vue 单文件组件最佳实践

vue 单文件组件最佳实践

生命周期 template

<template>
    <section>
        <h1>vue single file components template best practices</h1>
        <GlobalFilter
            :filterItems="filterItems"
        />
    </section>
</template>

<script>
    // utils
    import Utils from '@/utils';
    // config
    import Config from '@/config';
    // service
    import GlobalFilter from '@/components/global-filter';
    // service
    import CommonService from '@/services/commonService';

    const log = console.log;

    export default {
        name: 'VSFCTBP',
        components: {
            GlobalFilter,
        },
        props: {
            obj: {
                type: Object,
                default: () => ({}),
                required: true,
            },
            arr: {
                type: Object,
                default: () => [],
                required: true,
            },
            bool: {
                type: Boolean,
                default: false,
                required: true,
            },
            str: {
                type: String,
                default: '',
                required: true,
            },
            num: {
                type: Number,
                default: 0,
                required: true,
            },
        },
        data () {
            return {
                title: 'title',
                desc: 'description',
                loading: false,
                filterItems: {
                    region: 'zh-Hans',
                },
                startTime: '',
                endTime: '',
            };
        },
        computed: {
            time () {
                return this.endTime - this.startTime;
            },
        },
        watch: {
            '$route.query' (val, oldval) {
                log(`new $route.query`, val, oldval);
            },
            '$route.params' (val) {
                log(`new $route.params`, val, oldval);
            },
        },
        beforeCreated () {
            // 
        },
        created () {
            // 
        },
        mounted () {
            this.init();
        },
        destroyed () {
            // 
        },
        methods: {
            init () {
                this.fetchAPI();
            },
            async fetchAPI () {
                this.loading = true;
                const {
                    data,
                    msg,
                    status,
                } = await fetch(`/api/v3/getUsers`)
                // const res = await fetch(`/api/v3/getUsers`)
                .then(res => res.json())
                .then(json => {
                    log(`fetch ok =`, json);
                    return json;
                })
                .catch(err => {
                    log(`fetch error =`, err);
                    return err;
                })
                .finally((ok, err) => {
                    this.loading = false;
                });
            },
        },
    };
</script>


<style lang="scss">
    .container {
        box-sizing: border-box;
        display: flex;
        flex-flow: row nowrap;
        align-items: center;
        justify-content: space-between;
        .item {
            color: #0f0;
        }
    }
</style>