calculado
definición
computedDefinición: Los cálculos receptivos que manejan lógica compleja se usan más comúnmente
después de vue3 computed. En términos relativos, los oyentes se usan menos. El oyente debe monitorear los cambios en el valor de un atributo y realizar operaciones posteriores, y sus computedfunciones han cubierto muchas
Condición de activación: se calculará una vez cuando se cargue la página. Si el valor utilizado en cálculos posteriores cambia, se llamará tantas veces como cambie el número de valores para obtener el último valor.
manifestación
uso normal
<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>
Uso predeterminado
<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>
De forma predeterminada, solo calculamos un valor, pero si el valor calculado no se vuelve a calcular debido a otros cambios, pero el valor calculado se elimina cuando se cambia el parámetro, entonces se iniciará el método. Se utiliza el método predeterminado, que es obligatorio. en setla getdemostración Abra la consola y observe los parámetros para comprender.