berechnet
Definition
computedDefinition: Responsive Berechnungen, die komplexe Logik verarbeiten, werden
nach vue3 häufiger computedverwendet. Relativ gesehen werden Listener weniger verwendet. Der Listener dient dazu, Änderungen in einem Attributwert zu überwachen und nachfolgende Operationen auszuführen, und seine computedFunktionen haben viele abgedeckt
Auslösebedingung: Wird beim Laden der Seite einmal berechnet. Wenn sich der in nachfolgenden Berechnungen verwendete Wert ändert, wird er so oft aufgerufen, wie sich der Wert ändert, um den neuesten Wert zu erhalten.
Demo
normaler Gebrauch
<template>
<div id="watch-example">
<p>
<input v-model="fullName"/>
</p>
<p>{
{
fullName }}</p>
</div>
</template>
<script lang="ts" setup>
import Edit from './edit.vue'
const data = reactive({
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
})
const fullName = computed({
get() {
return data.firstName + ' ' + data.lastName
},
set(newValue) {
console.log(newValue)
const names = newValue.split(' ')
data.firstName = names[0]
data.lastName = names[names.length - 1]
}
})
</script>
Standardverwendung
<template>
<div id="watch-example">
<p>
<input v-model="fullName"/>
</p>
<p>{
{
fullName }}</p>
</div>
</template>
<script lang="ts" setup>
import Edit from './edit.vue'
const data = reactive({
firstName: 'Foo',
lastName: 'Bar',
fullName: 'Foo Bar'
})
const fullName = computed(()=> {
return data.firstName + ' ' + data.lastName
})
</script>
Standardmäßig berechnen wir nur einen Wert, aber wenn der berechnete Wert aufgrund anderer Änderungen nicht neu berechnet wird, sondern der berechnete Wert herausgenommen wird, wenn der Parameter geändert wird, wird die Methode gestartet. Es wird die Standardmethode verwendet, die erforderlich ist in setder getDemo Öffnen Sie die Konsole und sehen Sie sich die Parameter an, um sie zu verstehen.