export default { data(){ return { users: [] // async data called in create or mounted hook } }, computed: { filteredUsers() { return this.users.filter(el => el === 'red') } someFunction() { // 1. this does not work const result = this.users.filter(el => el === 'red') console.log(result) // undefined // 2. this works console.log(this.filteredUsers) } } }En el ejemplo, #1 no está definido porque los usuarios inicialmente están vacíos. Lo cual entiendo.
¿Cómo es que no tengo que poner un condicional o una verificación para ver si existe filteredUsers cuando se usa en otro computado? ¿Cómo maneja Vue esta lógica internamente?
A medida que cambia la matriz de usuarios, los usuarios filtrados calculados cambiarán. ¿Y cuando esto cambie, asumo que las otras propiedades calculadas se actualizarán?
Soy bastante nuevo en Vue, así que tengo curiosidad por saber si hay alguna advertencia sobre el uso de computado dentro de computado.
Puede usar directamente this.filteredUser() dentro de su someFunction(). Vue almacena en caché la propiedad computada y, si los datos de origen cambian, la almacena en caché nuevamente y no realiza ningún cálculo para la misma llamada computada. Aquí hay una parte del documento de Vue "las propiedades calculadas se almacenan en caché en función de sus dependencias reactivas". Esta es probablemente la razón por la que está teniendo este problema.