Dieses Mal werde ich praktische Fälle von Vue-Berechnungsattributen und Zuhörern vorstellen. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Vue-Berechnungsattributen und Zuhörern? Stehen Sie auf und schauen Sie nach.
Grundlegendes Beispiel
<p id="example">
<p>Original message: "{{ message }}"</p>
<p>Computed reversed message: "{{ reversedMessage }}"</p>
</p>
var vm = new Vue({
el: '#example',
data: {
message: 'Hello'
},
computed: {
// 计算属性的 getter
reversedMessage: function () {
// `this` 指向 vm 实例
return this.message.split('').reverse().join('')
}
}
})Ergebnis:
Ursprüngliche Nachricht: „Hallo“Hier deklarieren wir eine berechnete Eigenschaft reversedMessage. Die von uns bereitgestellte Funktion wird als Getter-Funktion der Eigenschaft vm.reversedMessage verwendet:Berechnete umgekehrte Nachricht : "olleH"
console.log(vm.reversedMessage) // => 'olleH' vm.message = 'Goodbye' console.log(vm.reversedMessage) // => 'eybdooG'
hängt immer vom Wert von vm.message ab. vm.reversedMessage
von vm.message abhängt. Wenn sich also vm.message ändert, werden auch alle Bindungen aktualisiert, die von vm.reversedMessage abhängen. Und das Beste daran ist, dass wir diese Abhängigkeit auf deklarative Weise erstellt haben: Die Getter-Funktion der berechneten Eigenschaft hat keine Nebenwirkungen, was das Testen und Verstehen erleichtert vm.reversedMessage
Berechnungseigenschaften-Caching vs. Methoden
Sie haben vielleicht bemerkt, dass wir den gleichen Effekt erzielen können, indem wir eine Methode innerhalb einesAusdrucks aufrufen:
<p>Reversed message: "{{ reversedMessage() }}"</p>
// 在组件中
methods: {
reversedMessage: function () {
return this.message.split('').reverse().join('')
}
}computed: {
now: function () {
return Date.now()
}
}Berechnete Eigenschaften im Vergleich zu Listening-Eigenschaften
Vue bietet eine allgemeinere Möglichkeit, Datenänderungen auf Vue-Instanzen zu beobachten und darauf zu reagieren: Listening-Eigenschaften. Wenn Sie einige Daten haben, die sich ändern müssen, wenn sich andere Daten ändern, ist es leicht, Überwachungen zu missbrauchen – insbesondere, wenn Sie AngularJS zuvor verwendet haben. Allerdings ist es oft besser, berechnete Eigenschaften anstelle zwingender Überwachungsrückrufe zu verwenden. Betrachten Sie dieses Beispiel:<p id="demo">{{ fullName }}</p>
var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
},
watch: {
firstName: function (val) {
this.fullName = val + ' ' + this.lastName
},
lastName: function (val) {
this.fullName = this.firstName + ' ' + val
}
}
})var vm = new Vue({
el: '#demo',
data: {
firstName: 'Foo',
lastName: 'Bar'
},
computed: {
fullName: function () {
return this.firstName + ' ' + this.lastName
}
}
})Setter für berechnete Eigenschaften
Berechnete Eigenschaften haben standardmäßig nur Getter, aber Sie können bei Bedarf auch einen Setter bereitstellen:
// ...
computed: {
fullName: {
// getter
get: function () {
return this.firstName + ' ' + this.lastName
},
// setter
set: function (newValue) {
var names = newValue.split(' ')
this.firstName = names[0]
this.lastName = names[names.length - 1]
}
}
}
// ..., der Setter wird aufgerufen und vm.firstName und vm.lastName werden entsprechend aktualisiert.
vm.fullName = 'John Doe' Listener
Während berechnete Eigenschaften in den meisten Fällen besser geeignet sind, ist manchmal ein benutzerdefinierter Listener 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.
Beispiel:<p id="watch-example">
<p>
Ask a yes/no question:
<input v-model="question">
</p>
<p>{{ answer }}</p>
</p>
<!-- 因为 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
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>Stellen Sie eine Ja/Nein-Frage:
Ich kann Ihnen keine Antwort geben, bis Sie eine Frage stellen !. Dies sind Dinge, die berechnete Eigenschaften nicht leisten können.In diesem Beispiel ermöglicht uns die Verwendung der Watch-Option, einen asynchronen Vorgang auszuführen (auf eine API zuzugreifen), die Häufigkeit der Ausführung des Vorgangs zu begrenzen und einen Zwischenwert
festzulegen, bevor wir den erhalten Endergebnis Status
Zusätzlich zur Watch-Option können Sie auch die imperative vm.$watch-API verwenden.
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:
Wie React die Anmeldeüberprüfungskontrolle im React-Router-Routing implementiert
Der Routing-Schutz im Angular-Routing So verwenden Sie
Das obige ist der detaillierte Inhalt vonVon Vue berechnete Eigenschaften und praktischer Fallaustausch mit Hörern. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
