reloj, calculado, filtro:
observar: monitorea los atributos existentes y llama automáticamente al método correspondiente una vez que los atributos cambian.
calculado: Supervise los atributos existentes. Una vez que las dependencias de los atributos cambien, se llamará automáticamente al método correspondiente. Computado tiene una introducción detallada. Pasemos al uso de calculado.
filtro: un método proporcionado por nosotros en js para ayudarnos a filtrar datos. Es un tipo de método. Si simplemente modifica los datos, use filtros. Si necesita procesar mucha lógica compleja, es mejor usar métodos. El filtro también se presenta en detalle, hable sobre la implementación de la función de filtro en Vue .
La diferencia entre reloj y calculado:
1.watch monitorea los atributos existentes y calcula calcula un nuevo atributo a través de los atributos existentes.
2.Watch no almacena datos en caché y se recargará cada vez que se abra la página.
Pero si lo calculado se ha calculado antes, almacenará en caché los resultados calculados. Si se solicita nuevamente, obtendrá los datos del caché
(por lo que el rendimiento de lo calculado es mejor que el de observación).
La diferencia entre filtro y calculado.
1. Diferentes tiempos de activación
La lógica de procesamiento detrás del atributo calculado es relativamente compleja y se basa en el mecanismo de notificación de actualización de datos de Vue . El cálculo solo se reactivará cuando otros elementos de datos de los que depende el atributo cambien. La ventaja es que la frecuencia de cálculo es relativamente baja; la desventaja es que depende de los componentes y es difícil de extraer a una lógica independiente, lo que significa que la reutilización es baja.
El filtro es mucho más simple, solo se activa cuando se llama explícitamente y generalmente se usa en la representación de plantillas. La ventaja es que es fácil abstraer fuera del componente; la desventaja es que el cálculo debe volver a ejecutarse cada vez que se representa la plantilla. Puedes sentir la diferencia al llamar al tiempo a través de ejemplos :
2. Diferentes ámbitos de aplicación
calculado está muy extendido y se puede aplicar a otros métodos, funciones de ciclo de vida y plantillas calculados; el filtro generalmente solo se usa para la representación de plantillas. Si desea reutilizarlo en otras ubicaciones, debe usar esta función._f:
Recordatorio: también puedes usar esto.$opciones
Vue.component('HelloWorld', {
filters: {
hello() {
return 'hello';
}
},
methods: {
ping() {
return `${this._f('hello')()} world`;
}
}
})Además, el filtro admite llamadas en cadena cuando se usa, lo que agrega la capacidad de combinar empalmes:
<span> {
{ name | normalize | capitalize }} </span>
3. Método de definición
Finalmente cabe señalar que el atributo calculado solo se puede definir dentro del componente o a través del objeto mixins; y filtro se puede definir de dos maneras, una se define dentro del componente a través del atributo filters; la otra se define fuera del componente a través de la función Vue.filter:
Vue.component('HelloWorld', {
filters: {
hello() {
return 'hello';
}
}
});
Vue.filter('hello', ()=> 'hello');Aplicar reglas
En resumen, el filtro no se puede almacenar en caché y se llama con frecuencia, por lo que es especialmente adecuado para escenarios de salida formateados, como el formato de fecha. El filtro tiene la capacidad de llamarse en combinación, por lo que se pueden definir un conjunto de filtros básicos y simples en el nivel de arquitectura del proyecto y combinarlos y aplicarlos dentro de los componentes según sea necesario.
El atributo calculado tiene capacidades de almacenamiento en caché y es más universal dentro de los componentes, por lo que es adecuado para conversión de datos complejos, estadísticas y otros escenarios.