Hoje falamos sobre como usar o atributo computado na API combinada do Vue 3.
Primeiro, vamos entender o que é o atributo calculado. No Vue, um atributo computado é um atributo computado cujo valor é calculado dinamicamente com base nos valores de outros dados. Você pode pensar nisso como uma fórmula dinâmica cujo resultado muda à medida que os dados de entrada mudam.
Na API de composição do Vue 3, trabalhar com propriedades computadas ficou mais fácil. Você só precisa definir um objeto no componente, incluindo algumas propriedades calculadas. Essas propriedades computadas podem se referir a outros dados e métodos no componente, assim como as propriedades computadas em uma instância Vue normal.
Abaixo está um exemplo simples. Digamos que temos um componente contador e queremos exibir o dobro da contagem atual na página em vez da própria contagem. Podemos usar o atributo calculado para obter essa funcionalidade:
<template>
<div>
<p>计数：{
{ count }}</p>
<p>两倍计数：{
{ doubleCount }}</p>
</div>
</template>
<script>
import {
computed } from 'vue';
export default {
data() {
return {
count: 0,
};
},
setup() {
const doubleCount = computed(() => this.count * 2);
return {
count,
doubleCount,
};
},
};
</script>
Neste exemplo, usamos a função calculada para definir um atributo calculado doubleCount. O valor desse atributo é calculado dinamicamente com base no valor da contagem. No modelo, podemos usar { { doubleCount }} como uma propriedade calculada normal para exibir a contagem dupla.
Claro, este é apenas o uso básico do atributo calculado. No desenvolvimento real, os atributos computados geralmente são mais complexos e são usados para processar vários dados e lógica de negócios. No entanto, por mais complexo que seja, a essência do atributo calculado é a mesma: calcular dinamicamente o resultado com base no valor de outros dados.
O exemplo a seguir é um pouco mais complexo, assumindo que queremos implementar uma função de carrinho de compras. Temos um array items que contém todos os itens do carrinho. Cada item tem um atributo de preço e um atributo de quantidade, indicando o preço e a quantidade do item. Queremos exibir o preço total de todos os itens no carrinho na página.
Neste momento, podemos usar o atributo calculado para alcançar esta função:
<template>
<div>
<ul>
<li v-for="item in items" :key="item.id">
{
{ item.name }} - ￥{
{ item.price }}
</li>
</ul>
<p>总价：￥{
{ totalPrice }}</p>
</div>
</template>
<script>
import {
computed } from 'vue';
export default {
data() {
return {
items: [
{
id: 1, name: '商品1', price: 10, quantity: 2 },
{
id: 2, name: '商品2', price: 20, quantity: 1 },
{
id: 3, name: '商品3', price: 30, quantity: 3 },
],
};
},
setup() {
const totalPrice = computed(() => {
let total = 0;
for (let i = 0; i < this.items.length; i++) {
const item = this.items[i];
total += item.price * item.quantity;
}
return total;
});
return {
items,
totalPrice,
};
},
};
</script>
Neste exemplo, usamos a propriedade computada totalPrice para calcular o preço total de todos os itens no carrinho. O valor desse atributo é obtido percorrendo a matriz de itens e calculando o preço total de cada item um a um. No modelo, podemos usar { { totalPrice }} para exibir o preço total como uma propriedade calculada normal .
Claro, este é apenas um exemplo simples de carrinho de compras. Em projetos reais, o carrinho de compras pode ser mais complicado, envolvendo o cálculo de vários descontos, impostos, status de liquidação e assim por diante. Mas não importa o quão complicado seja, usar o atributo computado pode nos ajudar a lidar facilmente com várias lógicas de negócios e cálculos de dados.
Aqui estão alguns usos mais avançados.
Todos devem saber que o atributo computado suporta chamadas em cadeia. Ou seja, podemos conectar vários atributos computados juntos para formar uma cadeia de atributos computados, realizando assim o processamento de dados camada por camada.
Claro, este é apenas um exemplo simples.Na verdade, a chamada em cadeia do atributo computado pode ser muito flexível, e várias cadeias de atributos computados podem ser definidas de acordo com as necessidades reais para executar vários processamentos complexos nos dados.
Além disso, o atributo computado também oferece suporte a funções avançadas, como watch e debounce, que podem nos ajudar a lidar melhor com dados e lógica de negócios. Por exemplo, podemos usar watch no atributo computado para monitorar a alteração de determinados dados e executar a operação correspondente quando os dados forem alterados:
<template>
<div>
<p>原始数据：{
{ originalData }}</p>
<p>处理后的数据：{
{ processedData }}</p>
</div>
</template>
<script>
import {
computed, watch } from 'vue';
export default {
data() {
return {
originalData: '',
};
},
setup() {
const processedData = computed(() => {
return JSON.parse(this.originalData);
});
watch(processedData, (value) => {
console.log('processedData changed:', value);
});
return {
originalData: '',
processedData,
};
},
};
</script>
Neste exemplo, definimos um atributo calculado processingData, que é usado para calcular o resultado do processamento dos dados originais originalData. Ao mesmo tempo, usamos a função de observação para monitorar as alterações de processingData. Quando os dados processados forem alterados, a função watch executará a função de retorno de chamada correspondente, aqui simplesmente imprima o valor alterado. No modelo, podemos usar { {processData}} para exibir os dados processados como uma propriedade computada normal .
Claro, este é apenas um exemplo simples. Na verdade, funções avançadas como watch e debounce podem nos ajudar a lidar melhor com dados e lógica de negócios. No entanto, deve-se notar que essas funções avançadas são mais complicadas e você precisa ter cuidado ao usá-las para evitar problemas desnecessários.