Watchers con Composition API

Trataré de simplificar esto:
.
Para definir watchers en Composition API, usamos la función watch(), esta función recibe dos parámetros:
.

1. Un objeto reactivo
2. En handler del watcher
   .
   Entonces, con objeto reactivo nos referimos a algo que Vue pueda hacer tracking (recordemos las bases de la reactividad), un objeto reactivo puede ser un Proxy, esto es porque, si recordamos las primeras clases, nosotros podíamos convertir en Proxys los objetos, y cada que intentábamos acceder a una propiedad de ese objeto podíamos interceptarlo con get. Pero los Proxys solo son fáciles de trabajar para reactividad con objetos (un JSON, un Arreglo, una función), pero son más complicados de trabajar con un valores planos (por ejemplo, un número o un string).
   .
   Es decir, imaginemos, ¿Cómo le aplicarías un Proxy a un objeto JSON? Fácil, le pasas dicho objeto al proxy, y pueden interceptar el get y el set porque tú puedes acceder y establecer propiedades dentro de un JSON, bien hasta ahí, pero ahora, ¿Cómo le aplicarías un proxy al número “0” por ejemplo? Es más dificl, no tienes un getter o un setter para ese tipo plano, no es un objeto que puedas acceder, es un tipo plano, por eso es que Watcher no acepta tipos planos.
   .
   Entonces, para solucionar esto, lo que hacemos es pasarle una función anónima que retorna ese tipo plano, una función sí puedes ser convertida en Proxy fácilmente, así que podemos acceder a sus getters y setters, y ya Vue hace el resto de la magia, es por eso que debemos mandar una función anónima en los watchers, así Vue puede convertirla en un Proxy y hacer su magia Vuetástica!
   .
   Dejo el código de esta clase:
   .
   https://github.com/RetaxMaster/vue3-platzi-commerce/tree/5437cefac6dbe4906e0f5fdb78a7854cffe0d9d6

Entendí cómo utilizarlo, pero me quedaron 2 dudas:

• ¿Por qué retornar en una función anónima? esa parte no la entendí
• ¿Los Array son los únicos que no necesitan la función anónima? o también si es un Objeto? o cuáles valores no necesitan esto?

De resto excelente clase profe

Para utilizar los watcher en composition API, debemos utilizar un elemento de Vue llamado watch en el componente app. Dentro de los parámetros de la función watch, debemos declarar una función anónima para obtener los valores de la propiedad reactiva

watch(() =>productoState.activeImage,(val,oldvalue)=>{});
al final de la función watcher de la propiedad observada, agregamos una propiedad llamada deep:true, que indica que se hará de una manera profunda. Esto lo utilizamos para los arreglos

Recorrido del cart con un ciclo: ```js watch(cartState.cart, (value, oldValue) =>{ var totalProds = 0; cartState.cart.forEach(function(product) { totalProds = totalProds + (product.price * product.quantityInCart); }) cartState.totalProductos = totalProds; }); ```watch(cartState.cart, (value, oldValue) =>{                  // console.log("value: " + value + " / oldValue:" + oldValue);                  var totalProds = 0;                  cartState.cart.forEach(function(product) {                      //console.log("quantityInCart: " + product.quantityInCart + " / Price:" + product.price);                      totalProds = totalProds + (product.price \* product.quantityInCart);                  })                  cartState.totalProductos = totalProds;                                });