Hablando de las propiedades computadas de Vue

propiedades calculadas calculadas

1. ¿Qué es una propiedad computada?

Las propiedades calculadas son esencialmente métodos, pero cuando se usan estas propiedades calculadas, sus nombres se usan directamente como propiedades, y las propiedades calculadas no se llaman como métodos, y no se requieren paréntesis () para llamarlas.

2. Por qué usar propiedades calculadas

Cuando necesita un atributo, debe realizar algunos cálculos. Por ejemplo, si desea un atributo de dinero con descuento, ahora hay precio y descuento. Entonces descuento=precio*descuento. El descuento está asociado con el precio y el descuento de las propiedades existentes.

Para obtener el valor del descuento, podemos escribir así.

<div>{
   
   {price*discount}}</div>

¿No queremos el atributo descontado? Parece que no necesitamos agregar un atributo para escribir esto, y podemos usar directamente la expresión para calcular el valor descontado.

Entonces, si tenemos que obtener un descuento, podemos pensar en escribir un método con métodos para calcular

<！--template-->
<div class="price">
        原价：<span v-text="price"></span><br>
        现价： <span v-text="discounted()"></span>
</div>
<！--script-->
  data() {
    return {
      price:100,
      discount:0.8
    }
  }，
  methods: {
  discounted(){
      this.price*discount
    }
  },

Eche un vistazo a la propiedad computada comunidad de vue

<！--template-->
<div class="price">
        原价：<span v-text="price"></span><br>
        现价： <span v-text="discounted"></span>
</div>
<！--script-->
computed: {
    discounted(){
      return this.price*this.discount
    }
  },

Pensaremos de nuevo, ¿no podemos obtener descuentos usando la expresión precio*descuento?

Entonces viene el problema, si nuestro descuento se basa en la cantidad que compraste, sigue las reglas:

Precio originalx	Descuento
0<x<=50	0.9
50<x<=100	0.85
100<x	0.8

Entonces, ¿cómo logramos esto? Intentemos verlo directamente con expresiones primero.

Aquí se informa un error, obviamente, las expresiones de varias líneas no son compatibles. Si necesitamos realizar algunos cálculos un poco complicados, tenemos que usar funciones.

Sin embargo, todavía se recomienda que incluso las expresiones simples se escriban en computado o computado.

Porque escribimos programas con la idea de separación de intereses , por ejemplo, css está escrito en <style>, y js está escrito en <script>, lo que nos resulta más cómodo de leer y hace que el código sea más estandarizado.

---

Entonces, hay otro problema. Obtuvimos el valor deseado aquí, pero descubrimos que no es suficiente usar métodos, ¿por qué necesitamos calcular y cuál es la diferencia entre los dos?

1. Cuando se utilizan métodos, por lo general se requieren paréntesis, pero no computados.

2. Los métodos volverán a ejecutar la función cada vez que se llame, mientras que el cálculo solo se ejecutará una vez si sus variables internas permanecen sin cambios o su valor de retorno permanece sin cambios, y el resultado calculado se obtendrá directamente del caché durante las ejecuciones posteriores.

En cuanto a por qué computado no usa paréntesis para llamar a métodos similares, es porque computado en sí mismo es un atributo. Su esencia es que hay dos métodos (establecer y obtener) dentro de computado. El resultado moral final de computado es el valor de retorno del get, mientras que el método set rara vez se usa, por lo que el método de escritura simplificado es el uso normal del formato calculado anterior.

3. La diferencia entre cómputo, métodos y reloj

	calculado	métodos	reloj
cache	tener	no	no
asincrónico	no	no	Fila
desencadenar	Uso de plantilla: datos	Uso de plantilla: método	Cambios de envío de datos monitoreados
flexibilidad	más bajo	elevado	más alto
recomendación	más alto	Segundo	Mínimo (las dependencias pueden complicarse fácilmente)

4. Caso: monitor al atravesar objetos de matriz

Luego, generalmente monitoreamos la matriz y monitoreamos los objetos de la matriz actual al atravesar.¿Qué debemos hacer?

También se pueden pasar parámetros calculados, qué objeto queremos detectar, simplemente pase el objeto actual, por lo que los datos detectados son dinámicos.

Permítanme usar el ejemplo que escribí ayer cuando jugué con CSS. Solo necesito prestar atención al precio aquí, los demás pueden ignorarse, y me da flojera cambiarlo, jaja.

<template>
  <div class="container">
    <div
      class="list"
      v-for="item in list"
      :key="item"
    >
      <div class="list-item">
        <img
          :src="item.url"
          alt=""
        >
          <div class="item-select">
            <!-- <div style="width:120px;float:left;">
              <button>喜欢</button>
            </div>
            <div style="width:120px;float:left;">
              <button>不喜欢</button>
            </div> -->
            <svg v-show="!item.like" @click="liked(item)" t="1647706494573" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953" width="200" height="200"><path d="M935.669676 115.583774C871.255802 51.1699 792.995954 24.681952 709.318118 37.925926c-66.219871 10.23398-133.643739 45.751911-196.853616 102.3398C448.652627 83.677837 381.228759 48.159906 315.008888 37.925926 231.331051 24.681952 153.071204 51.1699 88.65733 115.583774 23.641457 180.599647-7.060483 266.08348 1.367501 355.781305c9.029982 89.095826 55.383892 178.191652 134.245738 257.053498 12.039976 12.039976 55.985891 55.985891 100.533804 100.533804l0 0c53.577895 54.179894 108.359788 108.961787 109.563786 110.165785 0.601999 0.601999 1.203998 0.601999 1.805996 1.203998L511.862503 989.084068l48.761905-48.159906 4.815991-4.213992c9.029982 0 265.481481-267.287478 322.069371-324.477366 78.861846-78.861846 125.215755-167.957672 134.245738-257.053498C1031.387489 266.08348 1000.685549 180.599647 935.669676 115.583774zM147.653215 322.67137c-6.019988 18.059965-9.631981 34.915932-10.835979 47.557907-1.805996 13.845973-13.243974 24.079953-27.089947 24.079953l-1.805996 0c-16.855967 0-30.099941-15.651969-27.089947-32.507937 3.611993-21.069959 9.029982-40.333921 15.049971-57.791887 6.019988-16.253968 25.283951-22.875955 40.333921-14.447972 0 0 0.601999 0 0.601999 0C147.051216 296.183422 151.867207 310.029394 147.653215 322.67137zM364.372792 140.867725c0 13.243974-9.029982 24.681952-22.273956 27.089947-79.463845 13.243974-127.623751 48.159906-158.325691 86.687831-8.427984 10.835979-24.079953 13.845973-36.119929 6.621987 0 0-0.601999 0-0.601999 0-13.845973-8.427984-16.855967-27.691946-7.223986-40.93592 60.199882-78.861846 146.285714-103.543798 192.639624-110.767784 16.855967-2.407995 31.303939 10.23398 31.303939 27.089947L363.770793 140.867725z" p-id="5954" fill="#bfbfbf"></path></svg>
            <svg v-show="item.like" @click="liked(item)" t="1647706494573" class="icon" viewBox="0 0 1025 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="5953" width="200" height="200"><path d="M935.669676 115.583774C871.255802 51.1699 792.995954 24.681952 709.318118 37.925926c-66.219871 10.23398-133.643739 45.751911-196.853616 102.3398C448.652627 83.677837 381.228759 48.159906 315.008888 37.925926 231.331051 24.681952 153.071204 51.1699 88.65733 115.583774 23.641457 180.599647-7.060483 266.08348 1.367501 355.781305c9.029982 89.095826 55.383892 178.191652 134.245738 257.053498 12.039976 12.039976 55.985891 55.985891 100.533804 100.533804l0 0c53.577895 54.179894 108.359788 108.961787 109.563786 110.165785 0.601999 0.601999 1.203998 0.601999 1.805996 1.203998L511.862503 989.084068l48.761905-48.159906 4.815991-4.213992c9.029982 0 265.481481-267.287478 322.069371-324.477366 78.861846-78.861846 125.215755-167.957672 134.245738-257.053498C1031.387489 266.08348 1000.685549 180.599647 935.669676 115.583774zM147.653215 322.67137c-6.019988 18.059965-9.631981 34.915932-10.835979 47.557907-1.805996 13.845973-13.243974 24.079953-27.089947 24.079953l-1.805996 0c-16.855967 0-30.099941-15.651969-27.089947-32.507937 3.611993-21.069959 9.029982-40.333921 15.049971-57.791887 6.019988-16.253968 25.283951-22.875955 40.333921-14.447972 0 0 0.601999 0 0.601999 0C147.051216 296.183422 151.867207 310.029394 147.653215 322.67137zM364.372792 140.867725c0 13.243974-9.029982 24.681952-22.273956 27.089947-79.463845 13.243974-127.623751 48.159906-158.325691 86.687831-8.427984 10.835979-24.079953 13.845973-36.119929 6.621987 0 0-0.601999 0-0.601999 0-13.845973-8.427984-16.855967-27.691946-7.223986-40.93592 60.199882-78.861846 146.285714-103.543798 192.639624-110.767784 16.855967-2.407995 31.303939 10.23398 31.303939 27.089947L363.770793 140.867725z" p-id="5954" fill="#d4237a"></path></svg>
          </div>
          <div class="price">
        原价：<span v-text="item.price"></span><br>
        现价： <span v-text="discounted(item)"></span><br>
        (点亮中间的爱心再减5元！)
      </div>
      </div>
  </div>
  </div>
</template>

<script>
export default {
  name: "Child",
  data() {
    return {
      list: [
        {
            price:88.88,
          like: false,
          url:
            "https://tse4-mm.cn.bing.net/th/id/OIP-C.E5Ce0SanbLrLCq6j5IQXVQHaE7?w=268&h=180&c=7&r=0&o=5&dpr=1.12&pid=1.7",
        },
        {
            price:100,
          like: false,
          url:
            "https://img.zcool.cn/community/0146eb57d154f40000018c1b84142e.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
            price:20.56,
          like: false,
          url:
            "https://img.zcool.cn/community/[email protected]",
        },
        {
          price:100.50,
           like: false,
          url:
            "https://img.zcool.cn/community/0159bc5767a2600000018c1b76f216.jpg@1280w_1l_2o_100sh.jpg",
        },
        {
            price:666.00,
           like: false,
          url:
            "https://img.zcool.cn/community/0132e85e0abc74a8012165180d2178.jpg@1280w_1l_2o_100sh.jpg",
        },
      ],
      price:100,
      discount:0.8
    }
  },
  computed: {
    discounted(){
        return function(item){
          //对价格进行条件计算
          let price = item.price
          if(0<price&&price<=50){
              price = price*0.9
          }else if(50<price&&price<=100){
             price = price*0.85
          }else if(100<price){
             price = price*0.8
          }
          if(item.like){
            price -= 5
          }
          //返回两位小数
          return price.toFixed(2)
        }
    },
  },
  methods: {
    liked(item){
        item.like = !item.like
    }
  },  
};
</script>

<style>
body {
background-image: linear-gradient(to top, #c4c5c7 0%, #dcdddf 52%, #ebebeb 100%);
}
.container {
  margin: 0 auto;
  width: 400px;
  /* border: 1px solid black ; */
}
.list-item {
  margin-top: 40px;
}
p {
  margin: 10px 40%;
}
.list-item img {
  width: 100%;
  height: 300px;
  border-radius: 20px;
  box-shadow: 5px 10px 13px 3px rgba(110, 115, 127, 0.5);
  opacity: 0.8;
  transition: 0.8s;
}
.list-item img:hover {
  opacity: 1;
}
.item-select {
  width: 100%;
  height: 80px;
  position: relative;
}
/* .item-select button {
  color: white;
  font-weight: bold;
  font-family: 幼圆;
  margin-top: 20px;
  width: 100px;
  height: 55px;
  margin-left: 90px;
  background-image: linear-gradient(to top, #a3bded 0%, #6991c7 100%);
  padding: 15px;
  display: inline;
  font-size: 18px;
  text-align: center;
  border-radius: 10px;
  transition: 0.5s;
  white-space: nowrap;
  border: 1px #dee7ec solid;
  opacity: 0.8;
}
button:hover {
  background-image: linear-gradient(to right, #ff758c 0%, #ff7eb3 100%);
  color: white;
  width: 105px;
  height: 60px;
} */
.list-item svg{
  width: 60px;
  height: 60px;
  margin: 20px 170px;
  position:absolute;
  left: 0;
  top: 0;
  transition: 0.3s;
}
.list-item svg:hover{
  width: 65px;
  height: 65px;
  transition: 0.1s;
}
</style>

A ver si la monitorización es exitosa

Agregue una función para iluminar el amor y luego menos 5 yuanes

Agregue un método que le guste, haga clic para revertir el me gusta del objeto actual

Agregue otra condición al atributo calculado. Cuando se encienda el amor, es decir, como = verdadero, se restarán 5 yuanes.

Si enciende el amor, el precio actual se puede reducir en 5 yuanes, cancelar la luz y restaurar el precio original, lo que indica que el monitoreo es exitoso.

Veamos el efecto

Cuando esté apagado, el precio se reanudará.