From 062f728fcc3efb8db869ebf2d828e5df4190cccd Mon Sep 17 00:00:00 2001 From: Pablo Nieto Date: Thu, 24 Aug 2017 10:43:24 -0500 Subject: [PATCH 1/4] Computed properties and Watchers setcion translation --- src/v2/guide/computed.md | 90 ++++++++++++++++++++-------------------- 1 file changed, 45 insertions(+), 45 deletions(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 04c071be5e..43217d8611 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -1,12 +1,12 @@ --- -title: Computed Properties and Watchers +title: Propiedades calculadas y Watchers type: guide order: 5 --- -## Computed Properties +## Propiedades Calculadas (Computed) -In-template expressions are very convenient, but they are really only meant for simple operations. Putting too much logic into your templates can make them bloated and hard to maintain. For example: +Las expresiones en plantillas son muy convenientes, pero realmente se deberían usar sólo para operaciones simples. Poner mucha lógica en sus plantillas puede hacerlas complicadas y difíciles de mantener. Por ejemplo: ``` html
@@ -14,11 +14,11 @@ In-template expressions are very convenient, but they are really only meant for
``` -At this point, the template is no longer simple and declarative. You have to look at it for a second before realizing that it displays `message` in reverse. The problem is made worse when you want to include the reversed message in your template more than once. +En este instante, la plantilla ya no es sencilla y declarativa. Tiene que verla por un segundo para entender que sólo muestra `message` invertido. El problema empeora si decide incluir el mensaje invertido en su plantilla más de una vez. -That's why for any complex logic, you should use a **computed property**. +Por eso es que para cualquier lógca compleja, debe usar una **propiedad calculada**. -### Basic Example +### Ejemplo Básico ``` html
@@ -34,16 +34,16 @@ var vm = new Vue({ message: 'Hello' }, computed: { - // a computed getter + // un getter calculado reversedMessage: function () { - // `this` points to the vm instance + // `this` apunta a la instancia vm return this.message.split('').reverse().join('') } } }) ``` -Result: +Resultado: {% raw %}
@@ -65,7 +65,7 @@ var vm = new Vue({ {% endraw %} -Here we have declared a computed property `reversedMessage`. The function we provided will be used as the getter function for the property `vm.reversedMessage`: +Aquí hemos declarado una propiedad calculada `reversedMessage`. La función que proveemos será usada como la función getter para la propiedad `vm.reversedMessage`: ``` js console.log(vm.reversedMessage) // -> 'olleH' @@ -73,20 +73,20 @@ vm.message = 'Goodbye' console.log(vm.reversedMessage) // -> 'eybdooG' ``` -You can open the console and play with the example vm yourself. The value of `vm.reversedMessage` is always dependent on the value of `vm.message`. +Puede abrir la consola y jugar con el ejemplo usted mismo. El valor de `vm.reversedMessage` siempre es dependiente del valor de `vm.message`. -You can data-bind to computed properties in templates just like a normal property. Vue is aware that `vm.reversedMessage` depends on `vm.message`, so it will update any bindings that depend on `vm.reversedMessage` when `vm.message` changes. And the best part is that we've created this dependency relationship declaratively: the computed getter function is pure and has no side effects, which makes it easy to test and reason about. +Puede enlazar datos a propiedades calculadas en las plantillas justo como una propiedad normal. Vue es consciente que `vm.reversedMessage` depende de `vm.message`, así que actualizará cualquier enlace que dependa de `vm.reversedMessage` siempre que `vm.message` cambie. Y la mejor parte es que hemos creado esta relación de dependencia de forma declarativa: la función getter calculada es pura y no tiene efectos secundarios, lo cual la hace muy fácil de probar y analizar. -### Computed Caching vs Methods +### Cacheo Calculado vs Métodos -You may have noticed we can achieve the same result by invoking a method in the expression: +Puede haberse dado cuenta que podemos obtener el mismo resultado invocando un método en la expresión: ``` html

Reversed message: "{{ reverseMessage() }}"

``` ``` js -// in component +// en componente methods: { reverseMessage: function () { return this.message.split('').reverse().join('') @@ -94,9 +94,9 @@ methods: { } ``` -Instead of a computed property, we can define the same function as a method instead. For the end result, the two approaches are indeed exactly the same. However, the difference is that **computed properties are cached based on their dependencies.** A computed property will only re-evaluate when some of its dependencies have changed. This means as long as `message` has not changed, multiple access to the `reversedMessage` computed property will immediately return the previously computed result without having to run the function again. +En vez de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, las dos formas son sin duda exactamente iguales. Sin embargo, la diferencia es que **las propiedades calculadas son cacheadas con base en sus dependencias.** Una propiedad calculada sólo será re-evaluada cuando alguna de sus dependencias haya cambiado. Esto quiere decir que mientras `message` no cambie, accesos múltiples a la propiedad calculada `reversedMessage` va a retornar inmediatamente el resultado calculado anteriormente sin tener que evaluar la función de nuevo. -This also means the following computed property will never update, because `Date.now()` is not a reactive dependency: +Esto también quiere decir que la siguiente propiedad calculada nunca será actualizada, por que `Date.now()` no es una dependencia reactiva. ``` js computed: { @@ -106,13 +106,13 @@ computed: { } ``` -In comparison, a method invocation will **always** run the function whenever a re-render happens. +En comparación, una invocación a un método **siempre** ejecutará la función cuando un re-render ocurra. -Why do we need caching? Imagine we have an expensive computed property **A**, which requires looping through a huge Array and doing a lot of computations. Then we may have other computed properties that in turn depend on **A**. Without caching, we would be executing **A**’s getter many more times than necessary! In cases where you do not want caching, use a method instead. +Por qué necesitamos cacheo? Imagine que tenemos una costosa propiedad calculada **A**, la cual requiere iterar sobre un enorme Arreglo mientras realiza muchos cálculos. Luego podríamos tener otras propiedades calculadas que a su vez dependen de **A**. Sin caché, estaríamos ejecutando el getter de **A** muchas veces más de las necesarias! En casos donde no requiera caché, use un método. -### Computed vs Watched Property +### Propiedad Calculada versus Watcher -Vue does provide a more generic way to observe and react to data changes on a Vue instance: **watch properties**. When you have some data that needs to change based on some other data, it is tempting to overuse `watch` - especially if you are coming from an AngularJS background. However, it is often a better idea to use a computed property rather than an imperative `watch` callback. Consider this example: +Vue de hecho provee una forma más genérica de observar y reaccionar a cambios de datos en una instancia Vue: **observar propiedades**. Cuando tiene datos que necesitan cambiar con base en otros datos, es tentador usar `watch`, especialmente si viene de un trasfondo de AngularJS. Sin embargo, es a menudo una mejor idea usar una propiedad calculada en vez de un callback `watch` imperativo. Considere el siguiente ejemplo: ``` html
{{ fullName }}
@@ -137,7 +137,7 @@ var vm = new Vue({ }) ``` -The above code is imperative and repetitive. Compare it with a computed property version: +El anterior código es imperativo y repetitivo. Compárelo con una versión usando propiedades calculadas: ``` js var vm = new Vue({ @@ -154,11 +154,11 @@ var vm = new Vue({ }) ``` -Much better, isn't it? +Mucho mejor, no es cierto? -### Computed Setter +### Setter calculado -Computed properties are by default getter-only, but you can also provide a setter when you need it: +Las propiedades calculadas por defecto son de sólo lectura, pero también puede proveer un setter si lo necesita: ``` js // ... @@ -179,13 +179,13 @@ computed: { // ... ``` -Now when you run `vm.fullName = 'John Doe'`, the setter will be invoked and `vm.firstName` and `vm.lastName` will be updated accordingly. +Ahora cuando ejecute `vm.fullName = 'John Doe'`, el setter será invocado y `vm.firstName` y `vm.lastName` serán actualizados acordemente. ## Watchers -While computed properties are more appropriate in most cases, there are times when a custom watcher is necessary. That's why Vue provides a more generic way to react to data changes through the `watch` option. This is most useful when you want to perform asynchronous or expensive operations in response to changing data. +Aunque las propiedades calculadas son más apropiadas en la mayoría de los casos, existen ocasiones donde un watcher hecho a medida es necesario. Para esos casos Vue provee una forma más genérica de reaccionar a cambios de datos usando la opción `watch`. Esto es muy útil cuando quiere realizar operaciones asíncronas o complicadas en respuesta a un cambio en los datos. -For example: +Por ejemplo: ``` html
@@ -198,10 +198,10 @@ For example: ``` ``` html - - - - + + + + ``` -Result: +Resultado: {% raw %}
@@ -300,6 +300,6 @@ var watchExampleVM = new Vue({ {% endraw %} -In this case, using the `watch` option allows us to perform an asynchronous operation (accessing an API), limit how often we perform that operation, and set intermediary states until we get a final answer. None of that would be possible with a computed property. +En este caso, usar la opción `watch` nos permite relizar una operación asíncrona (acceder un API), limitar qué tan a menudo realizamos dicha operación, y definir estados intermedios hasta que obtenemos una respuesta final. Nada de eso sería posible usando una propiedad calculada. -In addition to the `watch` option, you can also use the imperative [vm.$watch API](../api/#vm-watch). +En adición a la opción `watch`, también puede usar el imperativo [vm.$watch API](../api/#vm-watch). From 128b1090b35cf8fea8cfce38953c552d02004c4f Mon Sep 17 00:00:00 2001 From: Pablo Nieto Date: Thu, 24 Aug 2017 21:42:25 -0500 Subject: [PATCH 2/4] PR comments --- src/v2/guide/computed.md | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 43217d8611..96bf120ac2 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -77,7 +77,7 @@ Puede abrir la consola y jugar con el ejemplo usted mismo. El valor de `vm.rever Puede enlazar datos a propiedades calculadas en las plantillas justo como una propiedad normal. Vue es consciente que `vm.reversedMessage` depende de `vm.message`, así que actualizará cualquier enlace que dependa de `vm.reversedMessage` siempre que `vm.message` cambie. Y la mejor parte es que hemos creado esta relación de dependencia de forma declarativa: la función getter calculada es pura y no tiene efectos secundarios, lo cual la hace muy fácil de probar y analizar. -### Cacheo Calculado vs Métodos +### Cacheo Calculado versus Métodos Puede haberse dado cuenta que podemos obtener el mismo resultado invocando un método en la expresión: @@ -94,7 +94,7 @@ methods: { } ``` -En vez de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, las dos formas son sin duda exactamente iguales. Sin embargo, la diferencia es que **las propiedades calculadas son cacheadas con base en sus dependencias.** Una propiedad calculada sólo será re-evaluada cuando alguna de sus dependencias haya cambiado. Esto quiere decir que mientras `message` no cambie, accesos múltiples a la propiedad calculada `reversedMessage` va a retornar inmediatamente el resultado calculado anteriormente sin tener que evaluar la función de nuevo. +En vez de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, las dos formas son sin duda exactamente iguales. Sin embargo, la diferencia es que **las propiedades calculadas son cacheadas en base en sus dependencias.** Una propiedad calculada sólo será re-evaluada cuando alguna de sus dependencias haya cambiado. Esto quiere decir que mientras `message` no cambie, accesos múltiples a la propiedad calculada `reversedMessage` va a retornar inmediatamente el resultado calculado anteriormente sin tener que evaluar la función de nuevo. Esto también quiere decir que la siguiente propiedad calculada nunca será actualizada, por que `Date.now()` no es una dependencia reactiva. @@ -108,11 +108,11 @@ computed: { En comparación, una invocación a un método **siempre** ejecutará la función cuando un re-render ocurra. -Por qué necesitamos cacheo? Imagine que tenemos una costosa propiedad calculada **A**, la cual requiere iterar sobre un enorme Arreglo mientras realiza muchos cálculos. Luego podríamos tener otras propiedades calculadas que a su vez dependen de **A**. Sin caché, estaríamos ejecutando el getter de **A** muchas veces más de las necesarias! En casos donde no requiera caché, use un método. +Por qué necesitamos cacheo? Imagine que tenemos una costosa propiedad calculada **A**, la cual requiere iterar sobre una enorme colección mientras realiza muchos cálculos. Luego podríamos tener otras propiedades calculadas que a su vez dependen de **A**. Sin caché, estaríamos ejecutando el getter de **A** muchas veces más de las necesarias! En casos donde no requiera caché, use un método. ### Propiedad Calculada versus Watcher -Vue de hecho provee una forma más genérica de observar y reaccionar a cambios de datos en una instancia Vue: **observar propiedades**. Cuando tiene datos que necesitan cambiar con base en otros datos, es tentador usar `watch`, especialmente si viene de un trasfondo de AngularJS. Sin embargo, es a menudo una mejor idea usar una propiedad calculada en vez de un callback `watch` imperativo. Considere el siguiente ejemplo: +Vue de hecho provee una forma más genérica de observar y reaccionar a cambios de datos en una instancia Vue: **observar propiedades**. Cuando tiene datos que necesitan cambiar en base a otros datos, es tentador usar `watch`, especialmente si viene de un trasfondo de AngularJS. Sin embargo, es a menudo una mejor idea usar una propiedad calculada en vez de un callback `watch` imperativo. Considere el siguiente ejemplo: ``` html
{{ fullName }}
@@ -154,7 +154,7 @@ var vm = new Vue({ }) ``` -Mucho mejor, no es cierto? +Mucho mejor, ¿no es cierto? ### Setter calculado From 665ccd3a8dce9282c827bb8148ae6fa213c0b186 Mon Sep 17 00:00:00 2001 From: Pablo Nieto Date: Fri, 25 Aug 2017 06:25:26 -0500 Subject: [PATCH 3/4] =?UTF-8?q?Correcci=C3=B3n=20de=20comentarios?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/v2/guide/computed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 96bf120ac2..4198cd4d84 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -94,7 +94,7 @@ methods: { } ``` -En vez de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, las dos formas son sin duda exactamente iguales. Sin embargo, la diferencia es que **las propiedades calculadas son cacheadas en base en sus dependencias.** Una propiedad calculada sólo será re-evaluada cuando alguna de sus dependencias haya cambiado. Esto quiere decir que mientras `message` no cambie, accesos múltiples a la propiedad calculada `reversedMessage` va a retornar inmediatamente el resultado calculado anteriormente sin tener que evaluar la función de nuevo. +En vez de una propiedad calculada, podemos definir la misma función como un método. Para el resultado final, las dos formas son sin duda exactamente iguales. Sin embargo, la diferencia es que **las propiedades calculadas son cacheadas en base a sus dependencias.** Una propiedad calculada sólo será re-evaluada cuando alguna de sus dependencias haya cambiado. Esto quiere decir que mientras `message` no cambie, accesos múltiples a la propiedad calculada `reversedMessage` va a retornar inmediatamente el resultado calculado anteriormente sin tener que evaluar la función de nuevo. Esto también quiere decir que la siguiente propiedad calculada nunca será actualizada, por que `Date.now()` no es una dependencia reactiva. From 665138b8a1445d28296a8a1b81702d47f5c8b499 Mon Sep 17 00:00:00 2001 From: Pablo Nieto Date: Fri, 25 Aug 2017 06:27:10 -0500 Subject: [PATCH 4/4] Cambiado a array --- src/v2/guide/computed.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/v2/guide/computed.md b/src/v2/guide/computed.md index 4198cd4d84..2d420e78a0 100644 --- a/src/v2/guide/computed.md +++ b/src/v2/guide/computed.md @@ -108,7 +108,7 @@ computed: { En comparación, una invocación a un método **siempre** ejecutará la función cuando un re-render ocurra. -Por qué necesitamos cacheo? Imagine que tenemos una costosa propiedad calculada **A**, la cual requiere iterar sobre una enorme colección mientras realiza muchos cálculos. Luego podríamos tener otras propiedades calculadas que a su vez dependen de **A**. Sin caché, estaríamos ejecutando el getter de **A** muchas veces más de las necesarias! En casos donde no requiera caché, use un método. +Por qué necesitamos cacheo? Imagine que tenemos una costosa propiedad calculada **A**, la cual requiere iterar sobre un enorme array mientras realiza muchos cálculos. Luego podríamos tener otras propiedades calculadas que a su vez dependen de **A**. Sin caché, estaríamos ejecutando el getter de **A** muchas veces más de las necesarias! En casos donde no requiera caché, use un método. ### Propiedad Calculada versus Watcher