Propiedades computadas de Vue3

Las propiedades computadas se utilizan para calcular dinámicamente valores de propiedades derivados según los cambios de otros datos, y tienen un mecanismo de caché; solo se recalculan cuando cambian las dependencias relacionadas.

Palabra clave de la propiedad computada:computed。

Las propiedades computadas son muy útiles para manejar lógica compleja.

Puedes ver el siguiente ejemplo de inversión de una cadena:

Ejemplo 1

<div id="app"> {{ message.split('').reverse().join('') }} </div>

Pruébalo »

En el Ejemplo 1, la plantilla se vuelve muy compleja y no es fácil de entender.

A continuación, veamos un ejemplo que usa propiedades computadas:

Ejemplo 2

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Ejemplo de prueba de Vue - Tutorial de Ejemplo (example.com)</title> <script src="https://cdn.staticfile.org/vue/3.0.5/vue.global.js"></script> </head> <body> <div id="app"> <p>Cadena original: {{ message }}</p> <p>Cadena invertida después del cálculo: {{ reversedMessage }}</p> </div> <script>const app = { data() { return { message: 'EJEMPLO!!' } }, computed: { // getter de la propiedad computada reversedMessage: function () { // `this` apunta a la instancia vm return this.message.split('').reverse().join('') } } } Vue.createApp(app).mount('#app')</script> </body> </html>

Pruébalo »

En el Ejemplo 2 se declara una propiedad computada reversedMessage.

La función proporcionada se utilizará como getter de la propiedad vm.reversedMessage.

vm.reversedMessage depende de vm.message; cuando vm.message cambia, vm.reversedMessage también se actualiza.

Usa la función `computed` para definir la propiedad computada:

Ejemplo

<template>
  <div>
    <p>Nombre del producto:{{ productName }}</p>
    <p>Precio del producto:{{ formattedPrice }}</p>
    <button @click="increasePrice">Aumentar el precio</button>
  </div>
</template>

<script>
import { reactive, computed } from 'vue';

export default {
  setup() {
    // Datos reactivos
    const state = reactive({
      name: 'Móvil',
      price: 2000
    });

    // Propiedad computada
    const productName = computed(() => {
      return`Descuento ${state.name}`;
    });

    const formattedPrice = computed(() => {
      return `￥${state.price.toFixed(2)}`;
    });

    // Método
    const increasePrice = () => {
      state.price += 100;
    };

    return {
      productName,
      formattedPrice,
      increasePrice
    };
  }
};
</script>

Explicación

computedFunción:

  • EnsetupEn la función se usacomputedLa función para definir la propiedad computada.
  • Devuelve el valor calculado mediante una función de flecha, que rastrea automáticamente los datos reactivos de los que depende (stateEn el objetonameyprice）。

Uso de la propiedad computada:

  • productNameLa propiedad computada se deriva destate.name, cuandostate.namecambia,productNamese actualiza automáticamente.
  • formattedPriceLa propiedad computada se deriva destate.price, cuandostate.pricecambia,formattedPricese actualiza automáticamente.

Datos reactivos:

  • Usareactivela función para crearstateel objeto, convirtiéndolo en datos reactivos, y puede escuchar los cambios de sus propiedades.

Método:

  • increasePriceEl método se usa para aumentarstate.priceel valor de, cada vez que se hace clic en el botón,state.priceel valor aumenta en 100, yformattedPricela propiedad computada se actualiza en consecuencia.

computed vs methods

Podemos usar methods en lugar de computed. En cuanto al efecto, ambos son iguales, pero computed se basa en el caché de sus dependencias; solo vuelve a obtener el valor cuando las dependencias relacionadas cambian. Con methods, en cada renderizado, la función siempre se vuelve a llamar y ejecutar.

Ejemplo 3

methods: { reversedMessage2: function () { return this.message.split('').reverse().join('') } }

Pruébalo »

Se puede decir que usar computed tiene un mejor rendimiento, pero si no deseas usar caché, puedes usar la propiedad methods.

computed setter

La propiedad computed solo tiene getter por defecto, pero si es necesario, también puedes proporcionar un setter:

Ejemplo 4

const app = { data() { return { name: 'Google', url: 'http://www.google.com' } }, computed: { site: { // getter get: function () { return this.name + ' ' + this.url }, // setter set: function (newValue) { var names = newValue.split(' ') this.name = names[0] this.url = names[names.length - 1] } } } } vm = Vue.createApp(app).mount('#app') document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url); document.write('<br>------ Actualizar datos ------<br>'); //Al llamar al setter, vm.name y vm.url también se actualizan correspondientemente. vm.site = 'Tutorial de Ejemplo https://www.example.com'; document.write('name: ' + vm.name); document.write('<br>'); document.write('url: ' + vm.url);

Pruébalo »

Según el resultado de ejecución del ejemplo, cuando se ejecutavm.site = 'Tutorial de Ejemplo http://www.example.com';,setterse llamará,vm.nameyvm.urltambién se actualizará correspondientemente.

Otras extensiones