[Organisation und Freigabe] 8 praktische Vue-Entwicklungstipps

In diesem Artikel werden 8 großartige Vue-Entwicklungsfähigkeiten zusammengestellt und geteilt, darunter Routing-Parameter-Entkopplung, Funktionskomponenten, Stilumfang, erweiterte Verwendung von Watch, Watch-Überwachung mehrerer Variablen usw. Ich hoffe, dass er für alle hilfreich ist!

1. Routenparameter-Entkopplung

Normalerweise gehen die meisten Leute bei der Verwendung von Routenparametern in Komponenten wie folgt vor.

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

Die Verwendung von $route in einer Komponente führt zu einer starken Kopplung an die entsprechende Route, wodurch die Flexibilität der Komponente durch die Beschränkung auf bestimmte URLs eingeschränkt wird. Der richtige Ansatz besteht darin, es durch Requisiten zu entkoppeln.

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

Nachdem das props-Attribut der Route auf true gesetzt wurde, kann die Komponente params-Parameter über props innerhalb der Komponente empfangen. [Verwandte Empfehlungen: vuejs-Video-Tutorial, Web-Front-End-Entwicklung]

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

Sie können Requisiten auch über den Funktionsmodus zurückgeben.

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

2. Funktionskomponente

Funktionskomponente ist zustandslos, kann nicht instanziiert werden und verfügt über keinen Lebenszyklus oder Methoden. Das Erstellen funktionaler Komponenten ist ebenfalls so einfach wie das Hinzufügen einer funktionalen Deklaration zu Ihrer Vorlage. Es eignet sich im Allgemeinen für Komponenten, die nur auf externe Datenänderungen angewiesen sind, und verbessert aufgrund seines geringen Gewichts die Rendering-Leistung. Alles, was die Komponente benötigt, wird über Kontextparameter übergeben. Es handelt sich um ein Kontextobjekt. Informationen zu spezifischen Eigenschaften finden Sie in der Dokumentation. props ist hier ein Objekt, das alle gebundenen Eigenschaften enthält.

<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>

Die übergeordnete Komponente verwendet

<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. Stilbereich

Es ist üblich, den Stil von Drittanbieterkomponenten während der Entwicklung zu ändern, aber aufgrund der Stilisolation des Bereichsattributs ist dies möglicherweise erforderlich Entfernen Sie den Gültigkeitsbereich oder erstellen Sie einen neuen Stil. Diese Praktiken haben Nebenwirkungen (Verschmutzung des Komponentenstils, Mangel an Eleganz) und werden mithilfe der Stildurchdringung im CSS-Präprozessor implementiert. Wir können>>> oder /deep/ verwenden, um dieses Problem zu lösen:

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

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

rrree

watch wird ausgelöst, wenn sich die Listener-Eigenschaft ändert Die Komponente wird erstellt und sofort ausgeführt. Eine Möglichkeit, die mir in den Sinn kommt, wäre, es einmal während des Erstellungslebenszyklus aufzurufen, aber das ist keine elegante Art, es zu schreiben, also könnten wir vielleicht so etwas verwenden.

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

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

Deep Listening

Wenn sich beim Abhören eines Objekts die Eigenschaften innerhalb des Objekts ändern, wird die Uhr nicht ausgelöst, sodass wir Deep Listening dafür einstellen können.

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

Lösen Sie den Listener aus, um mehrere Methoden auszuführen

Mit Arrays können Sie mehrere Formen festlegen, einschließlich Zeichenfolgen, Funktionen und Objekte.

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

5.watch überwacht mehrere Variablen

watch selbst kann nicht mehrere Variablen überwachen. Wir können jedoch „mehrere Variablen abhören“, indem wir ein Objekt mit einer berechneten Eigenschaft zurückgeben und dann dieses Objekt abhören.

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)
        }
    }
}

6. Ereignisparameter $event

$event ist eine spezielle Variable des Ereignisobjekts, die uns mehr verfügbare Parameter zur Implementierung komplexer Funktionen in bestimmten Szenarien bietet. Native Events: Verhält sich genauso wie das Standardereignisobjekt in Native Events.

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
        }
    }
}

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

Benutzerdefiniertes Ereignis: Wird in einem benutzerdefinierten Ereignis dargestellt, um den von der untergeordneten Komponente ausgelösten Wert zu erfassen.

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

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>

7. Programmatischer Ereignis-Listener

Definieren Sie beispielsweise einen Timer, wenn die Seite bereitgestellt wird, und der Timer muss gelöscht werden, wenn die Seite zerstört wird. Das scheint kein Problem zu sein. Bei näherer Betrachtung besteht der einzige Zweck von this.timer jedoch darin, die Timer-Nummer vor dem Zerstören abzurufen, andernfalls ist es nutzlos.

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

Es ist am besten, wenn möglich nur auf Lifecycle-Hooks zuzugreifen. Dies stellt kein ernstes Problem dar, kann jedoch als verwirrend angesehen werden. Wir können dieses Problem lösen, indem wir oder einmal verwenden, um auf die Zerstörung des Seitenlebenszyklus zu achten:

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入门教程、编程基础视频）

Das obige ist der detaillierte Inhalt von[Organisation und Freigabe] 8 praktische Vue-Entwicklungstipps. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!