[Organisasi dan Perkongsian] 8 Petua Pembangunan Vue Praktikal

Artikel ini menyusun dan berkongsi 8 kemahiran pembangunan Vue yang hebat, termasuk penyahgandingan parameter penghalaan, komponen berfungsi, skop gaya, penggunaan lanjutan jam tangan, pemantauan jam tangan berbilang pembolehubah, dll. Saya harap ia akan membantu semua orang!

1. Penyahgandingan parameter penghalaan

Biasanya parameter penghalaan digunakan dalam komponen, kebanyakan orang Akan lakukan perkara berikut.

export default {
    methods: {
        getParamsId() {
            return this.$route.params.id
        }
    }
}

Menggunakan $route dalam komponen menghasilkan gandingan yang kuat ke laluan sepadannya, mengehadkan fleksibiliti komponen dengan mengehadkannya kepada URL tertentu. Pendekatan yang betul ialah memisahkannya melalui prop.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: true
    }]
})

Selepas menetapkan atribut props laluan kepada benar, komponen boleh menerima parameter params melalui props. [Cadangan berkaitan: tutorial video vuejs, pembangunan bahagian hadapan web]

export default {
    props: [ id ],
    methods: {
        getParamsId() {
            return this.id
        }
    }
}

Anda juga boleh mengembalikan prop melalui mod berfungsi.

const router = new VueRouter({
    routes: [{
        path:  /user/:id ,
        component: User,
        props: (route) => ({
            id: route.query.id
        })
    }]
})

2. Komponen berfungsi

Komponen fungsian tidak mempunyai kewarganegaraan, ia tidak boleh dibuat seketika dan tidak mempunyai sebarang kitaran hayat atau kaedah. Mencipta komponen berfungsi juga semudah menambah pengisytiharan berfungsi pada templat anda. Ia biasanya sesuai untuk komponen yang hanya bergantung pada perubahan data luaran dan meningkatkan prestasi pemaparan kerana ringan. Semua yang diperlukan oleh komponen dihantar melalui parameter konteks. Ia adalah objek konteks, lihat dokumentasi untuk sifat tertentu. props di sini ialah objek yang mengandungi semua sifat terikat.

<template functional>
    <div class="list">
        <div class="item" v-for="item in props.list" :key="item.id" @click="props.itemClick(item)">
            <p>{{item.title}}</p>
            <p>{{item.content}}</p>
        </div>
    </div>
</template>

Kegunaan komponen induk

<template>
    <div>
        <List :list="list" :itemClick="item => (currentItem = item)" />
    </div>
</template>

import List from  @/components/List.vue
export default {
    components: {
        List
    },
    data() {
        return {
            list: [{
                title:  title ,
                content:  content
            }],
            currentItem:
        }
    }
}

3. Skop gaya

Diubah suai semasa pembangunan Ketiga -gaya komponen parti adalah sangat biasa, tetapi disebabkan pengasingan gaya atribut berskop, anda mungkin perlu mengalih keluar skop atau mencipta gaya baharu. Amalan ini mempunyai kesan sampingan (pencemaran gaya komponen, kekurangan keanggunan) dan dilaksanakan menggunakan penembusan gaya dalam prapemproses CSS. Kami boleh menggunakan>>> atau /deep/ untuk menyelesaikan masalah ini:

<style scoped>
Outer layer >>> .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

<style scoped>
/deep/ .el-checkbox {
  display: block;
  font-size: 26px;

  .el-checkbox__label {
    font-size: 16px;
  }
}
</style>

Penggunaan lanjutan jam tangan

jam tangan dicetuskan apabila sifat pendengar berubah Kadangkala kita mahu jam tangan dilaksanakan serta-merta selepas komponen dibuat. Satu cara yang mungkin terlintas di fikiran ialah memanggilnya sekali semasa kitaran hayat penciptaan, tetapi itu bukan cara yang elegan untuk menulisnya, jadi mungkin kita boleh menggunakan sesuatu seperti ini.

export default {
    data() {
        return {
            name:  Joe
        }
    },
    watch: {
        name: {
            handler:  sayName ,
            immediate: true
        }
    },
    methods: {
        sayName() {
            console.log(this.name)
        }
    }
}

Deep Listening

Apabila mendengar objek, jam tangan tidak akan dicetuskan apabila sifat di dalam objek berubah, jadi kita boleh menyediakan pemantauan mendalam untuknya.

export default {
    data: {
        studen: {
            name:  Joe ,
            skill: {
                run: {
                    speed:  fast
                }
            }
        }
    },
    watch: {
        studen: {
            handler:  sayName ,
            deep: true
        }
    },
    methods: {
        sayName() {
            console.log(this.studen)
        }
    }
}

Cetuskan pendengar untuk melaksanakan berbilang kaedah

Menggunakan tatasusunan, anda boleh menetapkan berbilang bentuk, termasuk rentetan, fungsi, objek.

export default {
    data: {
        name:  Joe
    },
    watch: {
        name: [
             sayName1 ,
            function(newVal, oldVal) {
                this.sayName2()
            },
            {
                handler:  sayName3 ,
                immaediate: true
            }
        ]
    },
    methods: {
        sayName1() {
            console.log( sayName1==> , this.name)
        },
        sayName2() {
            console.log( sayName2==> , this.name)
        },
        sayName3() {
            console.log( sayName3==> , this.name)
        }
    }
}

5 jam tangan memantau berbilang pembolehubah

jam tangan itu sendiri tidak boleh memantau berbilang pembolehubah. Walau bagaimanapun, kita boleh "mendengar pelbagai pembolehubah" dengan mengembalikan objek dengan sifat yang dikira dan kemudian mendengar objek itu.

export default {
    data() {
        return {
            msg1:  apple ,
            msg2:  banana
        }
    },
    compouted: {
        msgObj() {
            const { msg1, msg2 } = this
            return {
                msg1,
                msg2
            }
        }
    },
    watch: {
        msgObj: {
            handler(newVal, oldVal) {
                if (newVal.msg1 != oldVal.msg1) {
                    console.log( msg1 is change )
                }
                if (newVal.msg2 != oldVal.msg2) {
                    console.log( msg2 is change )
                }
            },
            deep: true
        }
    }
}

6 Parameter acara $event

$event ialah pembolehubah khas objek acara, yang dalam beberapa senario ialah Kami. menyediakan lebih banyak parameter yang tersedia untuk melaksanakan fungsi yang kompleks. Peristiwa Asli: Berkelakuan sama seperti objek acara lalai dalam Peristiwa Asli.

<template>
    <div>
        <input type="text" @input="inputHandler( hello , $event)" />
    </div>
</template>

export default {
    methods: {
        inputHandler(msg, e) {
            console.log(e.target.value)
        }
    }
}

Acara tersuai: Diwakili dalam acara tersuai sebagai menangkap nilai yang dilemparkan daripada komponen anak.

export default {
    methods: {
        customEvent() {
            this.$emit( custom-event ,  some value )
        }
    }
}

<template>
    <div>
        <my-item v-for="(item, index) in list" @custom-event="customEvent(index, $event)">
            </my-list>
    </div>
</template>

export default {
    methods: {
        customEvent(index, e) {
            console.log(e) //  some value
        }
    }
}

7 Pendengar acara terprogram

Contohnya, tentukan pemasa apabila halaman dipasang. pemasa perlu dikosongkan apabila halaman dimusnahkan. Ini nampaknya tidak menjadi masalah. Tetapi melihat lebih dekat, satu-satunya tujuan this.timer adalah untuk mendapatkan nombor pemasa sebelumDestroy, jika tidak, ia tidak berguna.

export default {
    mounted() {
        this.timer = setInterval(() => {
            console.log(Date.now())
        }, 1000)
    },
    beforeDestroy() {
        clearInterval(this.timer)
    }
}

Sebaik-baiknya hanya mengakses cangkuk kitaran hayat jika boleh. Ini bukan masalah serius tetapi boleh dianggap mengelirukan. Kami boleh menyelesaikan masalah ini dengan menggunakan atau sekali untuk mendengar kemusnahan kitaran hayat halaman:

export default {
    mounted() {
        this.creatInterval( hello )
        this.creatInterval( world )
    },
    creatInterval(msg) {
        let timer = setInterval(() => {
            console.log(msg)
        }, 1000)
        this.$once( hook:beforeDestroy , function() {
            clearInterval(timer)
        })
    }
}

使用这种方法，即使我们同时创建多个定时器，也不影响效果。这是因为它们将在页面被销毁后以编程方式自动清除。8.监听组件生命周期通常我们使用 $emit 监听组件生命周期，父组件接收事件进行通知。

子组件

export default {
    mounted() {
        this.$emit( listenMounted )
    }
}

父组件

<template>
    <div>
        <List @listenMounted="listenMounted" />
    </div>
</template>

其实有一种简单的方法就是使用@hook 来监听组件的生命周期，而不需要在组件内部做任何改动。同样，创建、更新等也可以使用这个方法。

<template>
    <List @hook:mounted="listenMounted" />
</template>

（学习视频分享：vuejs入门教程、编程基础视频）

Atas ialah kandungan terperinci [Organisasi dan Perkongsian] 8 Petua Pembangunan Vue Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!