La documentación de Vue.js dice:

El uso de la opción watch nos permite realizar una operación asincrónica (acceder a una API), limitar la frecuencia con la que realizamos esa operación y establecer estados intermedios hasta que obtengamos una respuesta final. Nada de eso sería posible con una propiedad computed.

Mientras estamos en la misma página, podemos ver que la propiedad computed usa una función igual que watcher.

Referencia: https: // vuejs .org / v2 / guide / computed.html # Propiedad calculada frente a propiedad visualizada

Entonces, mi pregunta es ¿cuál es la razón técnica que respalda la declaración anterior o que nos limita a usar las propiedades computed en lugar de watchers?

4
shazyriver 30 ago. 2020 a las 17:07

2 respuestas

La mejor respuesta

Es importante comprender cómo funcionan las propiedades de computed en Vue

  1. Cuando se está ejecutando la función prop computed (proporcionada por usted), Vue está monitoreando a qué otro data reactivo se accede para saber de qué datos depende el resultado
  2. El resultado de la función es almacenado en caché por Vue
  3. Cada vez que accede al valor de la propiedad computed (es getter), se ejecuta una pequeña parte del código de Vue: primero verifica si tiene valor en la caché y, en caso afirmativo, si algunas de las entradas cambiaron desde la última vez que se ejecutó la función. Si hay un valor y no hay cambios, la función no se ejecuta en absoluto y en su lugar se devuelve el valor en caché

El título de su pregunta menciona "asincrónico o costoso" ...

Costoso

Los costosos cálculos son exactamente para lo que computed son los accesorios porque la función se ejecuta solo cuando es necesario. Pero se ejecuta cada vez que algo cambia, que no siempre es lo que quieres. Entonces, los documentos están hablando de casos de uso en los que tiene un flujo de valores, digamos que el usuario escribe, y desea realizar la operación solo después de que se detenga durante 200 ms. O tiene algún flujo de datos (telemetría) pero desea actualizar el gráfico cada 2 segundos y no más.

Esto no es posible con computed porque Vue espera que la función devuelva un valor cada vez y ese valor se almacena en la caché para uso futuro .

Asincrónico

Como dije antes, Vue espera que la función computed devuelva un valor. Cuando ejecuta alguna llamada asincrónica dentro de computed prop getter, no tiene ningún valor para devolver (en caso de asincronía basada en devoluciones de llamada, pero Las funciones JS siempre devuelven algo) o tienes una promesa del valor futuro. Entonces Vue toma el resultado de su función (undefined o promesa) y lo almacena en el caché ... que es algo que no desea

8
Michal Levý 2 sep. 2020 a las 12:13

La propiedad calculada observa (observa) cambios en otras propiedades y realiza cálculos basados ​​en estas propiedades para devolver un valor ; por otro lado, la propiedad Watcher observa cambios en una propiedad y ejecuta alguna lógica basada en esa propiedad y no devuelve ningún valor .

Entonces, si su caso de uso necesita devolver un valor después de hacer algunos cálculos, use computed, de lo contrario, si necesita ejecutar algunas operaciones después de que una propiedad cambie, debe usar watch.

La propiedad del observador podría observar los cambios de la propiedad calculada porque la propiedad calculada devuelve un valor, pero no puede usar una propiedad calculada basada en el observador uno.

1
Boussadjra Brahim 30 ago. 2020 a las 14:34