[Vue] Básico (Propiedades y métodos de cálculo y datos)

Comencemos con un ejemplo

<template> 
  <div> 
    <p> matriz de origen: {{números}} </p> 
    <p> matriz ordenada: {{sortArray ()}} </p> 
    <p> 3 en el índice de matriz: {{findIndex ( 3)}} </p> 
    <p> totalNumbers: {{totalNumbers}} </p> 
    <button @ click = "changeArray ()"> 修改 数组 </button> 
  </div> 
</template> 

<script> 
export default { 
  data () { 
    return {números: [1, 5, 3, 9, 2, 4, 8 ]}; 
  }, 
  calculado: { 
    totalNumbers () { 
      console.log ( "calcular total" );
      devuelve  esto .
    }
  }, 
  métodos: { 
    sortArray () { 
      devuelve  este .numbers.slice (0) .sort ((a, b) => a - b); 
    }, 
    findIndex (valor) { 
      console.log ( "buscar índice" );
      devuelva  este .numbers.findIndex (m => m === valor); 
    }, 
    changeArray () { 
      for (let i = 0; i < this .numbers.length; i ++ ) {
         this . $ set ( this .numbers, i, Math.floor (Math.random () * 100 )); 
      } 
    } 
  } 
}; 
</script>

 Efecto corriente

 

1. Primero defina un conjunto de matrices (datos)
2. Defina atributos calculados, calcule la suma de matrices (atributos calculados)
3. Defina 3 métodos, ordene matrices, encuentre subíndices de valores específicos, modifique matrices (métodos)

 

Datos

El objeto de datos es el mejor para datos puros: si desea colocar los datos en algún lugar, utilícelos en plantillas, métodos o propiedades calculadas

 

Atributos calculados

Las propiedades calculadas son adecuadas para realizar expresiones más complejas, que a menudo son demasiado largas o deben reutilizarse con frecuencia.

El atributo calculado se almacenará en caché y los datos dependientes no se modificarán. Se tomarán directamente de la memoria caché. Esto se puede imprimir en console.log y el atributo calculado se puede verificar. Por lo tanto, el atributo de cálculo es adecuado para el cálculo intensivo de la CPU.

Las propiedades de cálculo se pueden configurar para leer y escribir

total: { 
    get () { 
        .... 
    } 
    set () { 
        ... 
    } 
}

 

Método

Si desea agregar una función a la plantilla, es mejor usar un método, generalmente pasando parámetros y obteniendo diferentes resultados basados ​​en los parámetros.

---

 

objeto de datos vs método vs atributo calculado

	Legible	Escribible	Aceptar parámetros	Necesita cálculo	Caché
datos	Si	Si	No puede	No	No
Método	Si	No	Puede	Si	No
Atributos calculados	Si	Si	No	Si	Si

Indique la fuente del reenvío: https://www.cnblogs.com/WilsonPan/p/12755476.html