[feature/composition-api-intro] Translate composition api introduction guide #9

Tintef · 2020-10-27T00:39:33Z

Description of Problem

None.

Proposed Solution

Translate src/guide/composition-api-introduction.md

Additional Information

None.

…n guide

lagp0310 · 2020-11-03T17:06:34Z

src/guide/composition-api-introduction.md

+# Introducción

-## Why Composition API?
+## Por qué la API de Composición?


A minor change here.

Suggested change

## Por qué la API de Composición?

## ¿Por qué la API de Composición?

lagp0310 · 2020-11-03T17:09:59Z

src/guide/composition-api-introduction.md

+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/why-the-composition-api" title="Learn how Composition API works in depth with Vue Mastery">Vea un video gratuito sobre la API de Composición en Vue Mastery</VideoLesson>

-Creating Vue components allows us to extract repeatable parts of the interface coupled with its functionality into reusable pieces of code. This alone can get our application pretty far in terms of maintainability and flexibility. However, our collective experience has proved that this alone might not be enough, especially when your application is getting really big – think several hundred components. When dealing with such large applications, sharing and reusing code becomes especially important.
+Crear componentes de Vue nos permite extraer partes repetibles de la interfaz junto con su funcionalidad en partes reusables de código. Esto puedo hacer que su aplicación llegue bastante lejos en términos de mantenibilidad y flexibilidad. Sin embargo, nuestra experiencia ha provado que solo esto puede no ser suficiente, especialmente cuando nuestra aplicación se está volviendo realmente grade - piense varios cientos de componentes. Al lidiar con este tipo de aplicaciones, compartir y reusar código se vuelve crucial.


Some minor changes 😄.

Suggested change

Crear componentes de Vue nos permite extraer partes repetibles de la interfaz junto con su funcionalidad en partes reusables de código. Esto puedo hacer que su aplicación llegue bastante lejos en términos de mantenibilidad y flexibilidad. Sin embargo, nuestra experiencia ha provado que solo esto puede no ser suficiente, especialmente cuando nuestra aplicación se está volviendo realmente grade - piense varios cientos de componentes. Al lidiar con este tipo de aplicaciones, compartir y reusar código se vuelve crucial.

Crear componentes de Vue nos permite extraer partes repetibles de la interfaz junto con su funcionalidad en partes reusables de código. Esto puede hacer que su aplicación llegue bastante lejos en términos de mantenibilidad y flexibilidad. Sin embargo, nuestra experiencia ha probado que solo esto puede no ser suficiente, especialmente cuando nuestra aplicación se está volviendo realmente grade - piense varios cientos de componentes. Al lidiar con este tipo de aplicaciones, compartir y reusar código se vuelve crucial

lagp0310 · 2020-11-03T17:11:43Z

src/guide/composition-api-introduction.md

+Crear componentes de Vue nos permite extraer partes repetibles de la interfaz junto con su funcionalidad en partes reusables de código. Esto puedo hacer que su aplicación llegue bastante lejos en términos de mantenibilidad y flexibilidad. Sin embargo, nuestra experiencia ha provado que solo esto puede no ser suficiente, especialmente cuando nuestra aplicación se está volviendo realmente grade - piense varios cientos de componentes. Al lidiar con este tipo de aplicaciones, compartir y reusar código se vuelve crucial.

-Let’s imagine that in our app, we have a view to show a list of repositories of a certain user. On top of that, we want to apply search and filter capabilities. Our component handling this view could look like this:
+Imaginemos que en nuestra aplicación, tenemos una vista que muestra una lista de repositorios de un cierto usuario. Sobre esto, quizas querramos agregar capacidad para buscar o filtrar la misma. Nuestra componente para dicha vista podría verse de la siguiente manera:


What do you think about this change?

Suggested change

Imaginemos que en nuestra aplicación, tenemos una vista que muestra una lista de repositorios de un cierto usuario. Sobre esto, quizas querramos agregar capacidad para buscar o filtrar la misma. Nuestra componente para dicha vista podría verse de la siguiente manera:

Imaginemos que en nuestra aplicación, tenemos una vista que muestra una lista de repositorios de un cierto usuario. Sobre esto, quizás queramos agregar capacidad para buscar o filtrar la misma. Nuestra componente para dicha vista podría verse de la siguiente manera:

lagp0310 · 2020-11-03T17:13:01Z

src/guide/composition-api-introduction.md

+![Vue API de Opciones: código agrupado por tipo de opción](https://user-images.githubusercontent.com/499550/62783021-7ce24400-ba89-11e9-9dd3-36f4f6b1fae2.png)

-Example presenting a large component where its **logical concerns** are grouped by colors.
+Ejemplo presentado una componente grande donde sus **responsabilidades lógicas** están agrupadas por color.


Minor change.

Suggested change

Ejemplo presentado una componente grande donde sus **responsabilidades lógicas** están agrupadas por color.

Ejemplo presentado un componente grande donde sus **responsabilidades lógicas** están agrupadas por color.

lagp0310 · 2020-11-03T17:15:06Z

src/guide/composition-api-introduction.md

+Esta fragmentación es la que hace difícil entender y mantener un componente complejo. La separación en opciones oscurece las responsabilidades lógicas subyacentes. Agregado a esto, cuando se trabajo en una única responsabilidad lógica, tenemos que "saltar" constantemente a través de los diferentes bloques de opciones para hallar el código relevante.

-It would be much nicer if we could collocate code related to the same logical concern. And this is exactly what the Composition API enables us to do.
+Sería mucho mejor si pudieron colocar el código relacionado a la misma responsabilidad lógica junto. Y esto es exactamente lo que la API de Composición nos permite hacer.


What do you think about this?

Suggested change

Sería mucho mejor si pudieron colocar el código relacionado a la misma responsabilidad lógica junto. Y esto es exactamente lo que la API de Composición nos permite hacer.

Sería mucho mejor si pudiésemos colocar junto el código relacionado a la misma responsabilidad lógica. Y esto es exactamente lo que la API de Composición nos permite hacer.

lagp0310 · 2020-11-03T17:18:36Z

src/guide/composition-api-introduction.md

+## Aspectos Básicos de la API de Composición

-Now that we know the **why** we can get to the **how**. To start working with the Composition API we first need a place where we can actually use it. In a Vue component, we call this place the `setup`.
+Ahora que sabemos el **por qué** podemos entrar en el **cómo**. Para comenzar a trabajo con la API de Composición primero necesitamos un lugar donde la podamos utilizar. En un componente Vue, nosotros llamamos a este lugar el `setup`.


After a little bit of research, I found that here porqué is the appropiate translation. What do you guys think? @Tintef @migsalazar @sxcamacho

Suggested change

Ahora que sabemos el **por qué** podemos entrar en el **cómo**. Para comenzar a trabajo con la API de Composición primero necesitamos un lugar donde la podamos utilizar. En un componente Vue, nosotros llamamos a este lugar el `setup`.

Ahora que sabemos el **porqué** podemos entrar en el **cómo**. Para comenzar a trabajar con la API de Composición primero necesitamos un lugar donde la podamos utilizar. En un componente Vue, nosotros llamamos a este lugar el `setup`.

lagp0310 · 2020-11-03T17:19:28Z

src/guide/composition-api-introduction.md

+<VideoLesson href="https://www.vuemastery.com/courses/vue-3-essentials/setup-and-reactive-references" title="Learn how setup works with Vue Mastery">Vea un video gratuito sobre setup en Vue Mastery</VideoLesson>

-The new `setup` component option is executed **before** the component is created, once the `props` are resolved, and serves as the entry point for composition API's.
+La nueva opción de componente `setup` se ejecuta **antes** de que el componente sea creado, una vez que las `props` fueron resultadas, y sirve como punto de entrada para la API de Composición.


What do you think about this?

Suggested change

La nueva opción de componente `setup` se ejecuta **antes** de que el componente sea creado, una vez que las `props` fueron resultadas, y sirve como punto de entrada para la API de Composición.

La nueva opción de componente `setup` se ejecuta **antes** de que el componente sea creado, una vez que las `props` fueron resueltas, y sirve como punto de entrada para la API de Composición.

lagp0310 · 2020-11-03T17:20:29Z

src/guide/composition-api-introduction.md


 ::: warning
-Because the component instance is not yet created when `setup` is executed, there is no `this` inside a `setup` option. This means, with the exception of `props`, you won't be able to access any properties declared in the component – **local state**, **computed properties** or **methods**.
+Dado que la instancia de componente todavía no está creada cuando `setup` es ejecutado, no existe `this` dentro de la opción `setup`. Esto quiere decir que, con la excepción de las `props`, usted no tendra acceso a ninguna propiedad declarada en la componente -- **estado local**, **propiedades computadas** o **métodos**.


Minor changes here! 😄

Suggested change

Dado que la instancia de componente todavía no está creada cuando `setup` es ejecutado, no existe `this` dentro de la opción `setup`. Esto quiere decir que, con la excepción de las `props`, usted no tendra acceso a ninguna propiedad declarada en la componente -- **estado local**, **propiedades computadas** o **métodos**.

Dado que la instancia de componente todavía no está creada cuando `setup` es ejecutado, no existe `this` dentro de la opción `setup`. Esto quiere decir que, con la excepción de las `props`, usted no tendrá acceso a ninguna propiedad declarada en el componente -- **estado local**, **propiedades computadas** o **métodos**.

lagp0310 · 2020-11-03T17:21:47Z

src/guide/composition-api-introduction.md

 :::

-The `setup` option should be a function that accepts `props` and `context` which we will talk about [later](composition-api-setup.html#arguments). Additionally, everything that we return from `setup` will be exposed to the rest of our component (computed properties, methods, lifecycle hooks and so on) as well as to the component's template.
+La opción `setup` debe ser una función que acepte `props` y `context`, sobre los cuales hablaremos [luego](composition-api-setup.html#arguments). También, todo lo que sea retornado desde `setup` sera expuesto al resto de nuestro componente (propiedades computadas, métodos, _hooks_ del ciclo de video y más) así como a la plantilla del componente.


Minor changes here 👍.

Suggested change

La opción `setup` debe ser una función que acepte `props` y `context`, sobre los cuales hablaremos [luego](composition-api-setup.html#arguments). También, todo lo que sea retornado desde `setup` sera expuesto al resto de nuestro componente (propiedades computadas, métodos, _hooks_ del ciclo de video y más) así como a la plantilla del componente.

La opción `setup` debe ser una función que acepte `props` y `context`, sobre los cuales hablaremos [luego](composition-api-setup.html#arguments). También, todo lo que sea retornado desde `setup` será expuesto al resto de nuestro componente (propiedades computadas, métodos, _hooks_ del ciclo de vida y más) así como a la plantilla del componente.

lagp0310 · 2020-11-03T17:22:27Z

src/guide/composition-api-introduction.md

 ```

-Now let’s start with extracting the first logical concern (marked as "1" in the original snippet).
+Ahora comencemos a extraer nuestra primer responsabilidad lógica (marcada como "1" en el _snippet_ original).


Suggested change

Ahora comencemos a extraer nuestra primer responsabilidad lógica (marcada como "1" en el _snippet_ original).

Ahora comencemos a extraer nuestra primera responsabilidad lógica (marcada como "1" en el _snippet_ original).

lagp0310 · 2020-11-03T17:24:14Z

src/guide/composition-api-introduction.md

  return {
    repositories,
-    getUserRepositories // functions returned behave the same as methods
+    getUserRepositories // funciones retornas se comportan igual que los métodos


Minor change here 😄.

Suggested change

getUserRepositories // funciones retornas se comportan igual que los métodos

getUserRepositories // funciones retornadas se comportan igual que los métodos

lagp0310 · 2020-11-03T17:25:13Z

src/guide/composition-api-introduction.md

 ```

-This is our starting point, except it's not working yet because our `repositories` variable is not reactive. This means from a user's perspective, the repository list would remain empty. Let's fix that!
+Este es nuestro punto de partida, excepto que todavía no funciona dado que nuestra variable `repositories` no es reactiva. Esto quiere decir que, desde el punto de vista del usuarios, la lista de repositorios se mantendrá vacía. Arreglemoslo!


Minor changes here.

Suggested change

Este es nuestro punto de partida, excepto que todavía no funciona dado que nuestra variable `repositories` no es reactiva. Esto quiere decir que, desde el punto de vista del usuarios, la lista de repositorios se mantendrá vacía. Arreglemoslo!

Este es nuestro punto de partida, excepto que todavía no funciona dado que nuestra variable `repositories` no es reactiva. Esto quiere decir que, desde el punto de vista del usuarios, la lista de repositorios se mantendrá vacía. ¡Arreglémoslo!

lagp0310 · 2020-11-03T17:26:28Z

src/guide/composition-api-introduction.md

+### Variables Reactivas con `ref`

-In Vue 3.0 we can make any variable reactive anywhere with a new `ref` function, like this:
+En Vue 3.0 podemos crear una variable reactiva en cualquier lado que la nueva función `ref`, de la siguiente manera:


What do you think about this?

Suggested change

En Vue 3.0 podemos crear una variable reactiva en cualquier lado que la nueva función `ref`, de la siguiente manera:

En Vue 3.0 podemos crear una variable reactiva en cualquier lado con la nueva función `ref`, de la siguiente manera:

lagp0310 · 2020-11-03T17:27:14Z

src/guide/composition-api-introduction.md

 ```

-`ref` takes the argument and returns it wrapped within an object with a `value` property, which can then be used to access or mutate the value of the reactive variable:
+`ref` toma el argumento y lo retorna envuelto en un objeto que una propiedad `value`, la cual puede ser usada luego para acceder o mutar el valor de la variable reactiva:


What do you think about this?

Suggested change

`ref` toma el argumento y lo retorna envuelto en un objeto que una propiedad `value`, la cual puede ser usada luego para acceder o mutar el valor de la variable reactiva:

`ref` toma el argumento y lo retorna envuelto en un objeto con una propiedad `value`, la cual puede ser usada luego para acceder o mutar el valor de la variable reactiva:

lagp0310 · 2020-11-03T17:28:22Z

src/guide/composition-api-introduction.md

 ```

-Done! Now whenever we call `getUserRepositories`, `repositories` will be mutated and the view will be updated to reflect the change. Our component should now look like this:
+Listo! Ahora siempre que llamemos `getUserRepositories`, `repositories` será mutada y la vista se actualizará para reflejar el cambio. Nuestro componente debería verse de la siguiente manera:


Minor change here 😄.

Suggested change

Listo! Ahora siempre que llamemos `getUserRepositories`, `repositories` será mutada y la vista se actualizará para reflejar el cambio. Nuestro componente debería verse de la siguiente manera:

¡Listo! Ahora siempre que llamemos `getUserRepositories`, `repositories` será mutada y la vista se actualizará para reflejar el cambio. Nuestro componente debería verse de la siguiente manera:

lagp0310 · 2020-11-03T17:29:30Z

src/guide/composition-api-introduction.md

 ```

-We have moved several pieces of our first logical concern into the `setup` method, nicely put close to each other. What’s left is calling `getUserRepositories` in the `mounted` hook and setting up a watcher to do that whenever the `user` prop changes.
+Hemos movidas unas cuantas partes de nuestra primera responsabilidad lógica dentro del método `setup`, muy cerca una de la otra. Lo que nos queda es invocar `getUserRepositories` dentro del _hook_ `mounted` y configurar un _watcher_ para realizarlo cada vez que nuestra prop `user` cambie.


What do you think about this? 😄

Suggested change

Hemos movidas unas cuantas partes de nuestra primera responsabilidad lógica dentro del método `setup`, muy cerca una de la otra. Lo que nos queda es invocar `getUserRepositories` dentro del _hook_ `mounted` y configurar un _watcher_ para realizarlo cada vez que nuestra prop `user` cambie.

Hemos movido unas cuantas partes de nuestra primera responsabilidad lógica dentro del método `setup`, muy cerca una de la otra. Lo que nos queda es invocar `getUserRepositories` dentro del _hook_ `mounted` y configurar un _watcher_ para que sea invocado cada vez que nuestra prop `user` cambie.

lagp0310 · 2020-11-03T17:32:19Z

src/guide/composition-api-introduction.md

+Para hacer que la API de composición fuese completa en comparación a la API de Opciones, también necesitamos una forma de registrar _hooks_ del ciclo de vida dentro de `setup`. Esto es posible gracias a nuevas funciones exportadas por Vue. Los _hooks_ del ciclo de vida en la API de composición tienen el mismo nombre al que tienen en la API de Opciones, pero tiene el prefijo `on`: por ejemplo, `mounted` sería `onMounted`.

-These functions accept a callback that will be executed when the hook is called by the component.
+Estas funciones aceptan un `callback` que será ejecutado cuando el _hook_ es llamad por el componente.


Typo here.

Suggested change

Estas funciones aceptan un `callback` que será ejecutado cuando el _hook_ es llamad por el componente.

Estas funciones aceptan un `callback` que será ejecutado cuando el _hook_ es llamado por el componente.

lagp0310 · 2020-11-03T17:33:18Z

src/guide/composition-api-introduction.md

  }

-  onMounted(getUserRepositories) // on `mounted` call `getUserRepositories`
+  onMounted(getUserRepositories) // al "montarse" invoca `getUserRepositories`


What do you think about this? This is to keep it consistent with the original docs.

Suggested change

onMounted(getUserRepositories) // al "montarse" invoca `getUserRepositories`

onMounted(getUserRepositories) // al `montarse` invoca `getUserRepositories`

lagp0310 · 2020-11-03T17:34:36Z

src/guide/composition-api-introduction.md

 ```

-For more details on `watch`, refer to our [in-depth guide]().
+Por más detalles sobre `watch`, vea nuestra [guía en profundidad]().


What do you think about this?

Suggested change

Por más detalles sobre `watch`, vea nuestra [guía en profundidad]().

Para más detalles sobre `watch`, vea nuestra [guía en profundidad]().

lagp0310 · 2020-11-03T17:35:52Z

src/guide/composition-api-introduction.md

+Por más detalles sobre `watch`, vea nuestra [guía en profundidad]().

-**Let’s now apply it to our example:**
+**Ahora apliquemoslo a nuestro ejemplo:**


Minor change here 😄.

Suggested change

**Ahora apliquemoslo a nuestro ejemplo:**

**Ahora apliquémoslo a nuestro ejemplo:**

lagp0310 · 2020-11-03T17:36:14Z

src/guide/composition-api-introduction.md

 import { ref, onMounted, watch, toRefs } from 'vue'

-// in our component
+// en nuestro componentes


Typo here.

Suggested change

// en nuestro componentes

// en nuestro componente

lagp0310 · 2020-11-03T17:36:56Z

src/guide/composition-api-introduction.md

  onMounted(getUserRepositories)

-  // set a watcher on the Reactive Reference to user prop
+  // configurar un watcher en la Referencia Reactica para la prop user


Typo here.

Suggested change

// configurar un watcher en la Referencia Reactica para la prop user

// configurar un watcher en la Referencia Reactiva para la prop user

lagp0310 · 2020-11-03T17:37:37Z

src/guide/composition-api-introduction.md

+Probablemente haya notado el use de `toRefs` al comienzo de nuestro `setup`. Esto se realiza para asegurar que nuestro _watcher_ reaccione a los cambios realizados a la prop `user`.

-With those changes in place, we've just moved the whole first logical concern into a single place. We can now do the same with the second concern – filtering based on `searchQuery`, this time with a computed property.
+Con estos cambios, hemos movido toda la primer responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.


Typo here 😄

Suggested change

Con estos cambios, hemos movido toda la primer responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.

Con estos cambios, hemos movido toda la primera responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.

lagp0310 · 2020-11-03T17:38:03Z

src/guide/composition-api-introduction.md

+Con estos cambios, hemos movido toda la primer responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.

-### Standalone `computed` properties
+### Propiedad Computadas Independientes


What do you think about this?

Suggested change

### Propiedad Computadas Independientes

### Propiedades Computadas Independientes

lagp0310 · 2020-11-03T17:38:58Z

src/guide/composition-api-introduction.md

  onMounted(getUserRepositories)

-  // set a watcher on the Reactive Reference to user prop
+  // configurar un watcher en la Referencia Reactica para la prop user


Typo here.

Suggested change

// configurar un watcher en la Referencia Reactica para la prop user

// configurar un watcher en la Referencia Reactiva para la prop user

lagp0310 · 2020-11-03T17:41:07Z

src/guide/composition-api-introduction.md

 ```

-We could do the same for other **logical concerns** but you might be already asking the question – _Isn’t this just moving the code to the `setup` option and making it extremely big?_ Well, that’s true. That’s why before moving on with the other responsibilities, we will first extract the above code into a standalone **composition function**. Let's start with creating `useUserRepositories`:
+Podríamos realizar lo mismo para la atra **responsabilidad lógica**, pero usted seguramente se este realizando la siguiente pregunta - _¿Esto no es simplemente mover el código a la opción `setup` y hacer la misma extremadamente grande?_ Bueno, eso es cierto. Es por esto que antes de mover las otras responsabilidades, primero extraeremos el código de arribo en una **función de composición** independiente. Comencemos por crear `useUserRepositories`:


Typo here.

Suggested change

Podríamos realizar lo mismo para la atra **responsabilidad lógica**, pero usted seguramente se este realizando la siguiente pregunta - _¿Esto no es simplemente mover el código a la opción `setup` y hacer la misma extremadamente grande?_ Bueno, eso es cierto. Es por esto que antes de mover las otras responsabilidades, primero extraeremos el código de arribo en una **función de composición** independiente. Comencemos por crear `useUserRepositories`:

Podríamos realizar lo mismo para la otra **responsabilidad lógica**, pero usted seguramente se esté realizando la siguiente pregunta - _¿Esto no es simplemente mover el código a la opción `setup` y hacer la misma extremadamente grande?_ Bueno, eso es cierto. Es por esto que antes de mover las otras responsabilidades, primero extraeremos el código de arriba en una **función de composición** independiente. Comencemos por crear `useUserRepositories`:

lagp0310 · 2020-11-03T17:42:00Z

src/guide/composition-api-introduction.md

 ```

-At this point you probably already know the drill, so let’s skip to the end and migrate the leftover filtering functionality. We don’t really need to get into the implementation details as it’s not the point of this guide.
+En este punto usted ya sabe como va la cosa, así que vayamos al final y migremos la funcionalidad de filtrado restante. No tenemos que entrar en los detalles de implementación, puesto que no va al caso de esta guía.


Minor change here 😄.

Suggested change

En este punto usted ya sabe como va la cosa, así que vayamos al final y migremos la funcionalidad de filtrado restante. No tenemos que entrar en los detalles de implementación, puesto que no va al caso de esta guía.

En este punto usted ya sabe cómo va la cosa, así que vayamos al final y migremos la funcionalidad de filtrado restante. No tenemos que entrar en los detalles de implementación, puesto que no va al caso de esta guía.

lagp0310 · 2020-11-03T17:42:29Z

src/guide/composition-api-introduction.md

 ```

-And we are done!
+Y terminamos!


Minor change 😄.

Suggested change

Y terminamos!

¡Y terminamos!

lagp0310 · 2020-11-03T17:43:27Z

Excellent work @Tintef! 🎉👍

[feature/composition-api-intro] Translate composition api introductio…

d68d532

…n guide

Tintef added the hacktoberfest-accepted label Oct 27, 2020

github-actions bot added the review-alert-box label Oct 27, 2020

lagp0310 reviewed Nov 3, 2020

View reviewed changes

maogongzi mentioned this pull request Dec 3, 2021

feat: translate maogongzi/docs#105

Merged

	## Por qué la API de Composición?
	## ¿Por qué la API de Composición?

	Imaginemos que en nuestra aplicación, tenemos una vista que muestra una lista de repositorios de un cierto usuario. Sobre esto, quizas querramos agregar capacidad para buscar o filtrar la misma. Nuestra componente para dicha vista podría verse de la siguiente manera:
	Imaginemos que en nuestra aplicación, tenemos una vista que muestra una lista de repositorios de un cierto usuario. Sobre esto, quizás queramos agregar capacidad para buscar o filtrar la misma. Nuestra componente para dicha vista podría verse de la siguiente manera:

	Ejemplo presentado una componente grande donde sus responsabilidades lógicas están agrupadas por color.
	Ejemplo presentado un componente grande donde sus responsabilidades lógicas están agrupadas por color.

	Sería mucho mejor si pudieron colocar el código relacionado a la misma responsabilidad lógica junto. Y esto es exactamente lo que la API de Composición nos permite hacer.
	Sería mucho mejor si pudiésemos colocar junto el código relacionado a la misma responsabilidad lógica. Y esto es exactamente lo que la API de Composición nos permite hacer.

	Ahora que sabemos el por qué podemos entrar en el cómo. Para comenzar a trabajo con la API de Composición primero necesitamos un lugar donde la podamos utilizar. En un componente Vue, nosotros llamamos a este lugar el `setup`.
	Ahora que sabemos el porqué podemos entrar en el cómo. Para comenzar a trabajar con la API de Composición primero necesitamos un lugar donde la podamos utilizar. En un componente Vue, nosotros llamamos a este lugar el `setup`.

	La nueva opción de componente `setup` se ejecuta antes de que el componente sea creado, una vez que las `props` fueron resultadas, y sirve como punto de entrada para la API de Composición.
	La nueva opción de componente `setup` se ejecuta antes de que el componente sea creado, una vez que las `props` fueron resueltas, y sirve como punto de entrada para la API de Composición.

	Dado que la instancia de componente todavía no está creada cuando `setup` es ejecutado, no existe `this` dentro de la opción `setup`. Esto quiere decir que, con la excepción de las `props`, usted no tendra acceso a ninguna propiedad declarada en la componente -- estado local, propiedades computadas o métodos.
	Dado que la instancia de componente todavía no está creada cuando `setup` es ejecutado, no existe `this` dentro de la opción `setup`. Esto quiere decir que, con la excepción de las `props`, usted no tendrá acceso a ninguna propiedad declarada en el componente -- estado local, propiedades computadas o métodos.

	La opción `setup` debe ser una función que acepte `props` y `context`, sobre los cuales hablaremos [luego](composition-api-setup.html#arguments). También, todo lo que sea retornado desde `setup` sera expuesto al resto de nuestro componente (propiedades computadas, métodos, _hooks_ del ciclo de video y más) así como a la plantilla del componente.
	La opción `setup` debe ser una función que acepte `props` y `context`, sobre los cuales hablaremos [luego](composition-api-setup.html#arguments). También, todo lo que sea retornado desde `setup` será expuesto al resto de nuestro componente (propiedades computadas, métodos, _hooks_ del ciclo de vida y más) así como a la plantilla del componente.

	Ahora comencemos a extraer nuestra primer responsabilidad lógica (marcada como "1" en el _snippet_ original).
	Ahora comencemos a extraer nuestra primera responsabilidad lógica (marcada como "1" en el _snippet_ original).

	getUserRepositories // funciones retornas se comportan igual que los métodos
	getUserRepositories // funciones retornadas se comportan igual que los métodos

	Este es nuestro punto de partida, excepto que todavía no funciona dado que nuestra variable `repositories` no es reactiva. Esto quiere decir que, desde el punto de vista del usuarios, la lista de repositorios se mantendrá vacía. Arreglemoslo!
	Este es nuestro punto de partida, excepto que todavía no funciona dado que nuestra variable `repositories` no es reactiva. Esto quiere decir que, desde el punto de vista del usuarios, la lista de repositorios se mantendrá vacía. ¡Arreglémoslo!

	En Vue 3.0 podemos crear una variable reactiva en cualquier lado que la nueva función `ref`, de la siguiente manera:
	En Vue 3.0 podemos crear una variable reactiva en cualquier lado con la nueva función `ref`, de la siguiente manera:

	`ref` toma el argumento y lo retorna envuelto en un objeto que una propiedad `value`, la cual puede ser usada luego para acceder o mutar el valor de la variable reactiva:
	`ref` toma el argumento y lo retorna envuelto en un objeto con una propiedad `value`, la cual puede ser usada luego para acceder o mutar el valor de la variable reactiva:

	Listo! Ahora siempre que llamemos `getUserRepositories`, `repositories` será mutada y la vista se actualizará para reflejar el cambio. Nuestro componente debería verse de la siguiente manera:
	¡Listo! Ahora siempre que llamemos `getUserRepositories`, `repositories` será mutada y la vista se actualizará para reflejar el cambio. Nuestro componente debería verse de la siguiente manera:

	Hemos movidas unas cuantas partes de nuestra primera responsabilidad lógica dentro del método `setup`, muy cerca una de la otra. Lo que nos queda es invocar `getUserRepositories` dentro del _hook_ `mounted` y configurar un _watcher_ para realizarlo cada vez que nuestra prop `user` cambie.
	Hemos movido unas cuantas partes de nuestra primera responsabilidad lógica dentro del método `setup`, muy cerca una de la otra. Lo que nos queda es invocar `getUserRepositories` dentro del _hook_ `mounted` y configurar un _watcher_ para que sea invocado cada vez que nuestra prop `user` cambie.

	Estas funciones aceptan un `callback` que será ejecutado cuando el _hook_ es llamad por el componente.
	Estas funciones aceptan un `callback` que será ejecutado cuando el _hook_ es llamado por el componente.

	onMounted(getUserRepositories) // al "montarse" invoca `getUserRepositories`
	onMounted(getUserRepositories) // al `montarse` invoca `getUserRepositories`

	Por más detalles sobre `watch`, vea nuestra [guía en profundidad]().
	Para más detalles sobre `watch`, vea nuestra [guía en profundidad]().

	Ahora apliquemoslo a nuestro ejemplo:
	Ahora apliquémoslo a nuestro ejemplo:

	// configurar un watcher en la Referencia Reactica para la prop user
	// configurar un watcher en la Referencia Reactiva para la prop user

[feature/composition-api-intro] Translate composition api introduction guide #9

Are you sure you want to change the base?

[feature/composition-api-intro] Translate composition api introduction guide #9

Uh oh!

Conversation

Tintef commented Oct 27, 2020

Description of Problem

Proposed Solution

Additional Information

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lagp0310 Nov 3, 2020 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

lagp0310 commented Nov 3, 2020

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

lagp0310 Nov 3, 2020 •

edited

Loading

	Con estos cambios, hemos movido toda la primer responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.
	Con estos cambios, hemos movido toda la primera responsabilidad lógica a un único lugar. Ahora podemos realizar lo mismo con la segunda responsabilidad - filtrar según `searchQuery`, esta vez con una propiedad computada.

	### Propiedad Computadas Independientes
	### Propiedades Computadas Independientes

	En este punto usted ya sabe como va la cosa, así que vayamos al final y migremos la funcionalidad de filtrado restante. No tenemos que entrar en los detalles de implementación, puesto que no va al caso de esta guía.
	En este punto usted ya sabe cómo va la cosa, así que vayamos al final y migremos la funcionalidad de filtrado restante. No tenemos que entrar en los detalles de implementación, puesto que no va al caso de esta guía.