Analyse von Listener-Anwendungsfällen in Vue.js

Dieses Mal werde ich Ihnen eine Analyse der Anwendungsfälle des Listeners in Vue.js bringen. Was sind die Vorsichtsmaßnahmen bei der Verwendung des Listeners in Vue.js? Schauen Sie mal rein.

Vue-Listener-Uhr

Während berechnete Eigenschaften in den meisten Fällen besser geeignet sind, ist manchmal ein benutzerdefiniertes Listener-Gerät erforderlich. Aus diesem Grund bietet Vue mit der Watch-Option eine allgemeinere Möglichkeit, auf Datenänderungen zu reagieren. Dieser Ansatz ist am nützlichsten, wenn Sie bei Datenänderungen asynchrone oder teure Vorgänge ausführen müssen. Zum Beispiel:

<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>

rrree

Erweiterte Verwendung des Listeners (Watch)

Angenommen, Sie haben den folgenden Code:

<!-- 因为 AJAX 库和通用工具的生态已经相当丰富，Vue 核心代码没有重复 -->
<!-- 提供这些功能以保持精简。这也可以让你自由选择自己更熟悉的工具。 -->
<script src="https://cdn.jsdelivr.net/npm/axios@0.12.0/dist/axios.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/lodash@4.13.1/lodash.min.js"></script>
<script>
var watchExampleVM = new Vue({
el: '#watch-example',
data: {
question: '',
answer: 'I cannot give you an answer until you ask a question!'
},
watch: {
// 如果 `question` 发生改变，这个函数就会运行
question: function (newQuestion, oldQuestion) {
this.answer = 'Waiting for you to stop typing...'
this.getAnswer()
}
},
methods: {
// `_.debounce` 是一个通过 Lodash 限制操作频率的函数。
// 在这个例子中，我们希望限制访问 yesno.wtf/api 的频率
// AJAX 请求直到用户输入完毕才会发出。想要了解更多关于
// `_.debounce` 函数 (及其近亲 `_.throttle`) 的知识，
// 请参考：https://lodash.com/docs#debounce
getAnswer: _.debounce(
function () {
if (this.question.indexOf('?') === -1) {
this.answer = 'Questions usually contain a question mark. ;-)'
return
}
this.answer = 'Thinking...'
var vm = this // this重定向
axios.get('https://yesno.wtf/api')
.then(function (response) {
vm.answer = _.capitalize(response.data.answer)
})
.catch(function (error) {
vm.answer = 'Error! Could not reach the API. ' + error
})
},
// 这是我们为判定用户停止输入等待的毫秒数
500
)
}
})
</script>

Oben Der Effekt des Codes besteht darin, dass wacth bei der Eingabe von „firstName“ den neuen Wert jeder Änderung überwacht und dann „fullName“ berechnet und ausgibt.

Handler-Methode und unmittelbares Attribut

Eine Funktion der Überwachung hier ist, dass sie nicht ausgeführt wird, wenn sie anfänglich gebunden ist, sondern ausgeführt wird Warten Sie, bis FirstName Monitoring-Berechnungen nur dann durchgeführt werden, wenn Änderungen auftreten. Was also, wenn wir die Änderung ausführen möchten, wenn sie ursprünglich gebunden ist? Wir müssen die Art und Weise ändern, wie wir watch schreiben.

<p>
  <p>FullName: {{fullName}}</p>
  <p>FirstName: <input type="text" v-model="firstName"></p>
</p>
new Vue({
 el: '#root',
 data: {
 firstName: 'Dawei',
 lastName: 'Lou',
 fullName: ''
 },
 watch: {
 firstName(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 }
 } 
})

Haben wir eine Handler-Methode an firstName gebunden? Standardmäßig wird dieser Handler, Vue.js, diese Logik verarbeiten, und die endgültige kompilierte Version ist tatsächlich dieser Handler.

Und „immediate: true“ bedeutet, dass die darin enthaltene Handler-Methode sofort ausgeführt wird, wenn sie in „wacth“ deklariert wird. Wenn sie „false“ ist, ist der Effekt derselbe wie bei unserem vorherigen und wird nicht ausgeführt beim Binden umsetzen.

Deep-Attribut

Es gibt auch ein Attribut „Deep“ in der Überwachung. Der Standardwert ist „false“, der angibt, ob eine Tiefenüberwachung erfolgen soll , es gibt eines in unserem Daten-OBJ-Attribut:

watch: {
 firstName: {
 handler(newName, oldName) {
  this.fullName = newName + ' ' + this.lastName;
 },
 // 代表在wacth里声明了firstName这个方法之后立即先去执行handler方法
 immediate: true
 }
}

Wenn wir die Datenansicht in das Eingabefeld eingeben, um den Wert von obj.a zu ändern, stellen wir fest, dass er ungültig ist. Aufgrund der Einschränkungen des modernen JavaScript (und des veralteten Object.observe) kann Vue das Hinzufügen oder Entfernen von Objekteigenschaften nicht erkennen. Da Vue bei der Initialisierung der Instanz den Getter/Setter-Konvertierungsprozess für die Eigenschaft durchführt, muss die Eigenschaft im Datenobjekt vorhanden sein, damit Vue sie konvertieren kann, sodass sie reagiert.

Standardmäßig lauscht der Handler nur auf Änderungen in der Referenz des Attributs obj. Er lauscht nur, wenn wir obj einen Wert in der gemounteten Event-Hook-Funktion zuweisen >

<p>
  <p>obj.a: {{obj.a}}</p>
  <p>obj.a: <input type="text" v-model="obj.a"></p>
</p>
new Vue({
 el: '#root',
 data: {
 obj: {
  a: 123
 }
 },
 watch: {
 obj: {
  handler(newName, oldName) {
   console.log('obj.a changed');
  },
  immediate: true
 }
 } 
})

Auf diese Weise wird unser Handler ausgeführt und obj.a geändert wird gedruckt.

Im Gegenteil, was ist, wenn wir den Wert des Attributs a in obj überwachen müssen? Dann ist das Attribut „deep“ praktisch!

mounted: {
 this.obj = {
 a: '456'
 }
}

tief bedeutet, dass der Listener Schicht für Schicht durchläuft und diesen Listener zu allen Eigenschaften des Objekts hinzufügt. Der Leistungsaufwand ist jedoch sehr groß Handler in diesem Listener.

Optimierung, wir können die

Zeichenfolge zur Überwachung verwenden.

watch: {
 obj: {
 handler(newName, oldName) {
  console.log('obj.a changed');
 },
 immediate: true,
 deep: true
 }
}

Ich glaube, dass Sie die Methode beherrschen, nachdem Sie den Fall in diesem Artikel gelesen haben. Weitere spannende Informationen finden Sie in anderen verwandten Artikeln auf der chinesischen PHP-Website!

Empfohlene Lektüre:

Eine Zusammenfassung der Methode zur Verwendung von JS zur Bestimmung des in einer Zeichenfolge enthaltenen Inhalts

JS +HTML5 echte Mausbindung Partikelanimation von Ereignissen

Das obige ist der detaillierte Inhalt vonAnalyse von Listener-Anwendungsfällen in Vue.js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!