Mi comprensión de las propiedades calculadas es que si la propiedad calculada no se usa en la plantilla, no se supone que se calcule. Sin embargo, cuando hay un observador para una propiedad calculada, se evalúa esta propiedad calculada.
Entiendo que no es la arquitectura de aplicación deseada, pero mi pregunta es si el hecho de que funcione de esta manera es un comportamiento deseado de Vue o algún efecto secundario de cómo se implementan las cosas en este momento y puede cambiar en versiones futuras.
O para poner la pregunta en otras palabras: ¿Debería evaluarse la propiedad calculada si no se usa en la plantilla y no tiene otro captador explícito en la base de código, excepto un observador?
Ejemplo:
<template> <div> <button @click="counter++">+1</button> {{ counter }} </div> </template> <script> export default { name: "Main", data() { return { counter: 0, }; }, computed: { notUsedInTemplate() { console.log("notUsedInTemplate computed called"); return this.counter + 1; }, }, watch: { notUsedInTemplate() { console.log("notUsedInTemplate watch called"); }, }, }; </script>Enlace a la caja de arena: https://codesandbox.io/s/computed-sandbox-ru3n3?file=/src/components/Main.vue:0-818
si la propiedad calculada no se usa en la plantilla, no se supone que se calcule
...no es correcto. La afirmación correcta es:
si la propiedad calculada no se usa (en ninguna parte), no se supone que se evalúe
El uso de watch evalúa la propiedad. De hecho, el watch es muy similar a la re-renderización de plantillas (en vue 3, la re-renderización es de hecho un efecto de reloj poco especial)
Porque para ver (cualquier cosa):
notUsedInTemplate getter, para averiguar a qué datos reactivos está accediendo (por lo que this.counter se rastrea como dependencia)this.counter , el observador ejecuta el captador notUsedInTemplate nuevamente para que pueda comparar el nuevo valor con el anteriorAsí que para responder a las preguntas:
notUsedInTemplate sino los datos subyacentes que usa para calcular su valorLa reactividad de Vue siempre tiene 2 fases:
Consulte este capítulo en los documentos - Cómo se rastrean los cambios : el ejemplo menciona explícitamente solo la representación de la plantilla (que usa el observador creado por el propio Vue), pero todo esto se aplica a todos los observadores , incluidos los creados por el usuario.
Tienes razón sobre la propiedad calculada. Cualquier cosa en la propiedad calculada se adjuntará a la instancia de vue y será accesible en la plantilla.
Por lo tanto, si no se usa en la plantilla, no debe calcularse.
las propiedades computed son declarativas en donde el watch es imperativo.
computed: { // a computed getter reversedMessage: function () { // `this` points to the vm instance return this.message.split('').reverse().join('') } }Y la mejor parte es que hemos creado esta relación de dependencia de forma declarativa: la función captadora calculada no tiene efectos secundarios, lo que hace que sea más fácil de probar y comprender.
watch son funciones que buscan cambios y actualizan el valor.
watch: { firstName: function (val) { this.fullName = val + ' ' + this.lastName }, lastName: function (val) { this.fullName = this.firstName + ' ' + val } } Al usar la propiedad de obtención computada, solo le facilita a vue el seguimiento de los cambios y la actualización de forma declarativa; sin embargo, puede hacer lo mismo con el watch , pero es imperativo y vue necesita buscar cambios y cada cambio requiere esa llamada de función para ser activador y luego ejecutar esa función.