1. Priorität von v-for und v-if
- Offensichtlich wird v-for vor vi analysiert (der Quellcode ist klar angegeben).
- Wenn es gleichzeitig auftritt, führt jedes Rendering zuerst die Schleife aus und beurteilt dann die Bedingung. In jedem Fall ist die Schleife unvermeidlich, was die Leistung verschwendet
- Um diese Situation zu vermeiden, verschachteln Sie die Vorlage in der äußeren Ebene, führen Sie die v-if-Beurteilung auf dieser Ebene durch und führen Sie dann die v-for-Schleife im Inneren durch
2. Übergeben von Werten zwischen Komponenten
Drei Möglichkeiten, Werte von Komponenten zu übergeben
2.1.1 Die übergeordnete Komponente übergibt Werte an die untergeordnete Komponente
- 1. Binden dynamischer Eigenschaften, wenn die übergeordnete Komponente die untergeordnete Komponente aufruft
<v-header :title="title"></v-header> - 2. In der untergeordneten Komponente befinden sich Requisiten, um die von der übergeordneten Komponente übergebenen Daten zu empfangen
- 3. Sie können Attribute, Methoden und Instanzen übergeben und direkt in Unterkomponenten verwenden
2.1.2 Die untergeordnete Komponente erhält aktiv die Eigenschaften und Methoden der übergeordneten Komponente
Unterkomponenten werden direkt übergebenthis.$parent.数据``this.$parent.方法
2. 2 untergeordnete Komponenten übergeben Werte an die übergeordnete Komponente
2.2.1 Die übergeordnete Komponente erhält aktiv die Daten und Methoden der untergeordneten Komponente
- Definieren Sie eine Referenz, wenn Sie untergeordnete Komponenten aufrufen
<v-header ref="header"></v-header> - Übergeben Sie die übergeordnete Komponente
this.$refs.header.属性 this.$refs.header.方法
2.2.2 Das benutzerdefinierte Ereignis der untergeordneten Komponente übergibt den Wert an die übergeordnete Komponente
Unterbaugruppe:
this. $emit("自定义事件名称" ,要传的数据) ;
Übergeordnete Komponente:
<Header @childInput= ' getVal '></Header>
methods:{
getVal(msg){
/ /msg就是，
子组件传递的数据
}
}
Unterbaugruppe
<template>
<div>
父组件传递过来的: {
{
this.$parent.msg}}
<!-- 定义一个子组件传值的方法 -->
<input type="button" value="点击触发" @click="childClick">
</div>
</template>
<script>
export default {
props:{
msg:String
},
data () {
return {
childValue:"我是一个子组件的值"
}
},
methods: {
childClick () {
this.$emit('childClick',this.childValue)
}
}
}
</script>
Übergeordnete Komponente
<template>
<div>
我的名字是
<!-- 子组件 -->
<!-- <child :msg="name"></child> -->
<!-- 引入子组件 定义一个on的方法监听子组件的状态-->
<!-- 点击子组件按钮,将子组件的数据显示在父组件上 -->
<!-- 自定义事件的名称要与子组件$emit的一致 -->
<child @childClick="childByValue"></child>
{
{
name}}
</div>
</template>
<script>
import Child from './Child'
export default {
data() {
return {
name:"pz",
msg:"父组件数据"
}
},
components: {
child:Child
},
methods: {
childByValue(childValue) {
// childValue就是子组件传过来的值
this.name = childValue
}
}
}
</script>
2.3 Wertübergabe zwischen Geschwisterkomponenten
(Um Werte zwischen nicht übergeordneten und untergeordneten Komponenten zu übertragen, müssen Sie eine öffentliche öffentliche Instanzdatei bus.js definieren, die als Zwischenlager für die Übertragung von Werten dient. Andernfalls wirkt sich die Übertragung von Werten zwischen Routingkomponenten nicht aus erreicht werden.)
Öffentliche bus.js
import Vue from 'vue'
export default new Vue()
Komponente A:
<template>
<div>
A组件:
<span>{
{
elementValue}}</span>
<input type="button" value="点击触发" @click="elementByValue">
</div>
</template>
<script>
// 引入公共的bug，来做为中间传达的工具
import Bus from './bus.js'
export default {
data () {
return {
elementValue: 4
}
},
methods: {
elementByValue: function () {
Bus.$emit('val', this.elementValue)
}
}
}
</script>
Komponente B:
<template>
<div>
B组件:
<input type="button" value="点击触发" @click="getData">
<span>{
{
name}}</span>
</div>
</template>
<script>
import Bus from './bus.js'
export default {
data () {
return {
name: 0
}
},
mounted: function () {
var vm = this
// 用$on事件来接收参数
Bus.$on('val', (data) => {
console.log(data)
vm.name = data
})
},
methods: {
getData: function () {
this.name++
}
}
}
</script>
3. Die Rolle des Schlüssels
Funktion: Solange der
Diff-Algorithmus für virtuelle Doms effizienter aktualisiert werden soll.
Wenn der Knotentyp unterschiedlich ist, beendet der virtuelle Dom direkt alle vorherigen Knoten, erstellt und fügt einen neuen Knoten ein und vergleicht die Knoten danach nicht mehr dieser Knoten.
Wenn der Knotentyp gleich ist, wird es die Attribute des Knotens neu die Aktualisierung des Knotens zu erreichen. Mit
der Taste wird jeden Knoten als Identifikations geben, und der diff - Algorithmus den Knoten richtig identifizieren und finden neue Position zum Einfügen des Knotens.
4. Der Unterschied zwischen v-if v-show
- v-if ist "echtes" bedingtes Rendern, da es sicherstellt, dass Ereignis-Listener und Unterkomponenten im bedingten Block während des Umschaltvorgangs ordnungsgemäß zerstört und neu erstellt werden.
- v-if ist auch faul: Wenn die Bedingung beim ersten Rendern falsch ist, wird nichts unternommen, bis die Bedingung zum ersten Mal wahr wird, und dann wird der bedingte Block gerendert.
- Im Gegensatz dazu ist V-Show viel einfacher - unabhängig von der Anfangsbedingung wird das Element immer gerendert und einfach auf Basis von CSS umgeschaltet.
- Im Allgemeinen hat v-if einen höheren Schaltaufwand, während v-show einen höheren anfänglichen Renderaufwand hat. Wenn Sie daher sehr häufig wechseln müssen, ist v-show besser. Wenn sich die Bedingungen zur Laufzeit wahrscheinlich nicht ändern, ist v-if besser.
5. So stellen Sie sicher, dass CSS nur in der aktuellen Komponente funktioniert
<style scope> </style>
Erweiterung: So ändern Sie den Stil der Einführung von Komponenten von Drittanbietern: Wenn beispielsweise Swiper eingeführt wird, muss der Stil der Paging-Punkte geändert werden. Demonstration der Verwendung der Sass-Stil-Penetration: übergeordnetes Element / tiefes / untergeordnetes Element
<style lang="sass" scope>
.swiper-pagination /deep/ .swiper-pagination-bullet-active {
background:red;
}
</style>
6. Lösen Sie das Problem der Verzögerung von 300 ms bei der Zeitverarbeitung für mobile Endgeräte
- Laden Sie
npm install fastclick herunter - 引入
FastClick aus 'fastclick'
importieren FastClick。attach (document. Body);
7. Zweck des Vue-Loaders
vue-loader ist ein Dateilader, der in einem js-Modul durch template / js / style ersetzt wird.
Zweck: js kann es6 schreiben css kann weniger sass verwenden
8. Was macht NextTick?
Beschreibung:
$ nextTick dient zum Ausführen eines verzögerten Rückrufs nach dem Ende des nächsten DOM-Aktualisierungszyklus. Verwenden Sie nach dem Ändern der Funktion $ nextTick, um die aktualisierte DOM-
Szene im Rückruf abzurufen: Arbeiten Sie basierend auf der neuen Ansicht, nachdem die Ansicht aktualisiert wurde
9. Warum geben Daten im Gerüst eine Funktion zurück?
Wenn Daten ein Objekt sind und das Objekt selbst ein Referenztyp ist, wirkt sich dies aufgrund der Eigenschaften von JS selbst auf die Daten aller Vue-Instanzen aus, wenn wir eines seiner Attribute ändern. Wenn Daten als Funktion an ein Objekt zurückgegeben werden, sind die Datenattribute jeder Instanz unabhängig und beeinflussen sich nicht gegenseitig.
10. Verständnis von Keep-Alive
Definition: Es handelt sich um eine integrierte Komponente. Sie kann den Übergangszustand während des Komponentenwechselvorgangs im Speicher speichern, um ein wiederholtes Rendern des Dom zu verhindern. Die
Beschreibung wird nicht im Dom-Baum gerendert .
11. Der Unterschied zwischen Uhr und berechnet
- Das berechnete Attribut ist der bekannte Wert in den Daten, um einen neuen Wert zu erhalten. Die Leistung ist nicht gut und die Änderungen anderer wirken sich auf Sie aus (passiv).
- Watch überwacht die Daten in den Daten, überwacht Routing-Änderungen, meine Änderungen wirken sich auf andere aus (aktiv), Sie können den neuen und den alten Wert abrufen