Skip to content

Transitions y Migration #57

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 8 commits into from
Closed

Transitions y Migration #57

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
dadc519
Merge con primera versión traducida. Mejora título acorde a commit ht…
Aug 23, 2018
930f616
Elimina las palabras "simple" y "sencillo" que no deben ser usadas de…
Aug 23, 2018
8d9998b
Añade aclaración "los hooks" de acuerdo al commit https://github.com/…
Aug 23, 2018
0f4d0bd
Añade Lorem Ipsum a ejemplo, de acuerdo con commit https://github.com…
Aug 23, 2018
ef0d3a8
Añade comillas en ejemplo de acuerdo con el commit https://github.com…
Aug 23, 2018
580e060
Anota que los modos ya no están disponibles en grupos de transición, …
Aug 23, 2018
3d09587
Merge con la última versión traducida.
Aug 23, 2018
58109c8
Traducción hasta la línea 227
Aug 23, 2018
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
141 changes: 71 additions & 70 deletions src/v2/guide/migration.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,53 +1,52 @@
---
title: Migration from Vue 1.x
title: Migración desde Vue 1.x
type: guide
order: 701
---

## FAQ
## Preguntas frecuentes

> Woah - this is a super long page! Does that mean 2.0 is completely different, I'll have to learn the basics all over again, and migrating will be practically impossible?
> Woah - ¡esta página es súper larga! ¿Eso significa que la versión 2.0 es completamente diferente y tendré que aprender los conceptos básicos una y otra vez? ¿la migración será prácticamente imposible?

I'm glad you asked! The answer is no. About 90% of the API is the same and the core concepts haven't changed. It's long because we like to offer very detailed explanations and include a lot of examples. Rest assured, __this is not something you have to read from top to bottom!__
¡Me alegra que lo pregunte! La respuesta es no. Alrededor del 90% de la API es la misma y los conceptos básicos no han cambiado. Es largo porque nos gusta ofrecer explicaciones muy detalladas e incluir muchos ejemplos. Quédese tranquilo, __¡esto no es algo que tenga que leer de arriba abajo!__

> Where should I start in a migration?
> ¿Por dónde debería comenzar una migración?

1. Start by running the [migration helper](https://github.com/vuejs/vue-migration-helper) on a current project. We've carefully minified and compressed a senior Vue dev into a simple command line interface. Whenever they recognize an obsolete feature, they'll let you know, offer suggestions, and provide links to more info.
1. Comience ejecutando el [asistente de migración](https://github.com/vuejs/vue-migration-helper) en un proyecto actual. Hemos minimizado y comprimido cuidadosamente un desarrollo de Vue superior en una interfaz de línea de comando simple. Así, cada vez que se reconoce una característica obsoleta, le informa, ofrece sugerencias y proporciona enlaces a más información.

2. After that, browse through the table of contents for this page in the sidebar. If you see a topic you may be affected by, but the migration helper didn't catch, check it out.
2. Después de eso, navegue por la tabla de contenido de esta página en la barra lateral. Si ve un tema que puede afectarle, pero que el asistente de migración no captó, compruébelo.

3. If you have any tests, run them and see what still fails. If you don't have tests, just open the app in your browser and keep an eye out for warnings or errors as you navigate around.
3. Si usted tiene algunos tests, ejecútelos y vea lo que aún falla. Sino tiene test, solo abra la aplicación en su navegador y esté atento a las advertencias o errores mientras navega.

4. By now, your app should be fully migrated. If you're still hungry for more though, you can read the rest of this page - or dive in to the new and improved guide from [the beginning](index.html). Many parts will be skimmable, since you're already familiar with the core concepts.
4. En este punto, su aplicación debería estar migrada por completo. Si aún tiene ganas de más, puede leer el resto de esta página [desde el principio](index.html). Muchas partes serán demasiado fáciles, ya que ya está familiarizado con los conceptos básicos.

> How long will it take to migrate a Vue 1.x app to 2.0?
> ¿Cuánto tiempo le llevará migrar una aplicación de Vue 1.x a 2.0?

It depends on a few factors:
Depende de algunos factores:

- The size of your app (small to medium-sized apps will probably be less than a day)
- El tamaño de su aplicación (en las aplicaciones pequeñas y medianas probablemente será menos de un día)

- How many times you get distracted and start playing with a cool new feature. 😉  Not judging, it also happened to us while building 2.0!
- Cuantas veces se distrae y comienza a jugar con una nueva función genial.😉  No le juzgamos, ¡a nosotros también nos pasó mientras construíamos 2.0!

- Which obsolete features you're using. Most can be upgraded with find-and-replace, but others might take a few minutes. If you're not currently following best practices, Vue 2.0 will also try harder to force you to. This is a good thing in the long run, but could also mean a significant (though possibly overdue) refactor.
- Las funciones obsoletas que esté usando. La mayoría se pueden actualizar con Buscar y Reemplazar, pero otras pueden tardar unos minutos. Si actualmente no está siguiendo las mejores prácticas, Vue 2.0 también intentará forzarle más a hacerlo. Esto es algo bueno a largo plazo, pero también podría significar una actualización (aunque posiblemente le retrase) significativa.

> If I upgrade to Vue 2, will I also have to upgrade Vuex and Vue Router?
> Si actualiza a Vue 2, ¿también tendrá que actualizar Vuex y Vue Router?

Only Vue Router 2 is compatible with Vue 2, so yes, you'll have to follow the [migration path for Vue Router](migration-vue-router.html) as well. Fortunately, most applications don't have a lot of router code, so this likely won't take more than an hour.
Solo Vue Router 2 es compatible con Vue 2, así que sí, también tendrá que seguir la [ruta de migración de Vue Router](migration-vue-router.html). Afortunadamente, la mayoría de aplicaciones no tienen mucho código de rutas, por lo que probablemente no le tome más de una hora.

As for Vuex, even version 0.8 is compatible with Vue 2, so you're not forced to upgrade. The only reason you may want to upgrade immediately is to take advantage of the new features in Vuex 2, such as modules and reduced boilerplate.
En cuanto a Vuex, incluso la versión 0.8 es compatible con Vue 2, por lo que no está obligado a actualizar. La única razón por la que es posible que desee actualizar de inmediato es aprovechar las nuevas funciones de Vuex 2, como los módulos y el _boilerplate_ reducido.

## Templates

### Fragment Instances <sup>removed</sup>
### Instancias fragmentadas <sup>removed</sup>

Every component must have exactly one root element. Fragment instances are no longer allowed. If you have a template like this:
Todo componente debe tener exactamente un elemento padre. Las instancias fragmentadas ya no son permitidas. Si usted tiene un template como este:

``` html
<p>foo</p>
<p>bar</p>
```

It's recommended to wrap the entire contents in a new element, like this:
Es recomendado envolver el contenido completo en un nuevo elemento, como se muestra a continuación:

``` html
<div>
Expand All @@ -58,46 +57,46 @@ It's recommended to wrap the entire contents in a new element, like this:

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run your end-to-end test suite or app after upgrading and look for <strong>console warnings</strong> about multiple root elements in a template.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute su entorno de pruebas end-to-end, o su aplicación, después de actualizar y busque <strong>advertencias en la terminal</strong> que se refieran a múltiples elementos padre en un template <em>"multiple root elements in a template"</em>.</p>
</div>
{% endraw %}

## Lifecycle Hooks
## Hooks de ciclo de vida

### `beforeCompile` <sup>removed</sup>
### `beforeCompile` <sup>eliminado</sup>

Use the `created` hook instead.
Use en su lugar el hook `created`.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

### `compiled` <sup>replaced</sup>
### `compiled` <sup>reemplazado</sup>

Use the new `mounted` hook instead.
Use el nuevo hook `mounted` en su lugar.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

### `attached` <sup>removed</sup>
### `attached` <sup>eliminado</sup>

Use a custom in-DOM check in other hooks. For example, to replace:
Utilize una verificación <em>in-DOM</em> personalizada en otros hooks. Por ejemplo, reemplace:

``` js
attached: function () {
doSomething()
}
```

You could use:
Por:

``` js
mounted: function () {
Expand All @@ -109,22 +108,22 @@ mounted: function () {

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

### `detached` <sup>removed</sup>
### `detached` <sup>eliminado</sup>

Use a custom in-DOM check in other hooks. For example, to replace:
Utilize una verificación <em>in-DOM</em> personalizada en otros hooks. Por ejemplo, reemplace:

``` js
detached: function () {
doSomething()
}
```

You could use:
Por:

``` js
destroyed: function () {
Expand All @@ -136,25 +135,25 @@ destroyed: function () {

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

### `init` <sup>renamed</sup>
### `init` <sup>renombrado</sup>

Use the new `beforeCreate` hook instead, which is essentially the same thing. It was renamed for consistency with other lifecycle methods.
Use el nuevo hook `beforeCreate` en su lugar, son esencialmente lo mismo. Fue renombrado por consistencia con otros métodos del ciclo de vida.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

### `ready` <sup>replaced</sup>
### `ready` <sup>reemplazado</sup>

Use the new `mounted` hook instead. It should be noted though that with `mounted`, there's no guarantee to be in-document. For that, also include `Vue.nextTick`/`vm.$nextTick`. For example:
Use el nuevo hook `mounted` en su lugar. Debe notarse que con `mounted` no hay garantía de que `this.$el` está en el documento, de ser necesario incluya también `Vue.nextTick`/`vm.$nextTick`. Por ejemplo:

``` js
mounted: function () {
Expand All @@ -166,64 +165,66 @@ mounted: function () {

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find all examples of this hook.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar todos las ocurrencias de este hook.</p>
</div>
{% endraw %}

## `v-for`

### `v-for` Argument Order for Arrays <sup>changed</sup>
### `v-for` Orden de los argumentos<sup>cambiado</sup>

When including an `index`, the argument order for arrays used to be `(index, value)`. It is now `(value, index)` to be more consistent with JavaScript's native array methods such as `forEach` and `map`.
Cuando se incluía un `index`, el orden de los argumentos en el arreglo solía ser `(index, value)`. Ahora es `(value, index)` para mayor consistencia con los métodos nativos de `Array` de Javascript como `forEach` y `map`.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of the obsolete argument order. Note that if you name your index arguments something unusual like <code>position</code> or <code>num</code>, the helper will not flag them.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el<a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar ocurrencias de un orden obsoleto de los argumentos. Note que si usted nombraba sus argumentos de manera inusual como <code>position</code> o <code>num</code> el asistente de migración no los podrá detectar.</p>
</div>
{% endraw %}

### `v-for` Argument Order for Objects <sup>changed</sup>
### `v-for` Orden de los argumentos para objetos <sup>cambiado</sup>

When including a `key`, the argument order for objects used to be `(key, value)`. It is now `(value, key)` to be more consistent with common object iterators such as lodash's.
Cuando se incluía una `key`, el orden de los argumentos para los objetos solía ser `(key, value)`. Ahora es `(value, key)` para mayor consistencia con iteradores de objetos comunes como <em>lodash's</em>

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of the obsolete argument order. Note that if you name your key arguments something like <code>name</code> or <code>property</code>, the helper will not flag them.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el<a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar ocurrencias de un orden obsoleto de los argumentos. Note que si usted nombraba sus argumentos de manera inusual como <code>name</code> o <code>property</code> el asistente de migración no los podrá detectar.</p>
</div>
{% endraw %}

### `$index` and `$key` <sup>removed</sup>
### `$index` y `$key` <sup>eliminados</sup>

The implicitly assigned `$index` and `$key` variables have been removed in favor of explicitly defining them in `v-for`. This makes the code easier to read for developers less experienced with Vue and also results in much clearer behavior when dealing with nested loops.
Las variables implícitas `$index` y `$key` fueron eliminadas en favor de definirlas explícitamente en `v-for`. Esto mejora la legibilidad del código para los desarrolladores menos experimentados con Vue y además resulta en un comportamiento mucho más claro cuando se lidia con ciclos anidados.

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of these removed variables. If you miss any, you should also see <strong>console errors</strong> such as: <code>Uncaught ReferenceError: $index is not defined</code></p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar ocurrencias de estas variables eliminadas. Si no encuentra alguna, también debería revisar otros <strong>errores de consola</strong> como: <code>Uncaught ReferenceError: $index is not defined</code></p>
</div>
{% endraw %}

### `track-by` <sup>replaced</sup>
### `track-by` <sup>reemplazado</sup>

`track-by` has been replaced with `key`, which works like any other attribute: without the `v-bind:` or `:` prefix, it is treated as a literal string. In most cases, you'd want to use a dynamic binding which expects a full expression instead of a key. For example, in place of:
`track-by` fue reemplazado por `key`, que funciona como cualquier otro atributo: sin el prefijo `v-bind` o `:` es tratado como un `string` literal. En la mayoría de los casos, se querrá enlazar dinámicamente una expresión en la propiedad `key`, por lo que se usará `v-bind` o `:`

Por ejemplo, en lugar de:

``` html
<div v-for="item in items" track-by="id">
```

You would now write:
Ahora debería escribir:

``` html
<div v-for="item in items" v-bind:key="item.id">
```

{% raw %}
<div class="upgrade-path">
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of <code>track-by</code>.</p>
<h4>Camino a la actualización</h4>
<p>Ejecute el <a href="https://github.com/vuejs/vue-migration-helper">asistente de migración</a> en su proyecto para encontrar ocurrencias de <code>track-by</code>.</p>
</div>
{% endraw %}

Expand Down Expand Up @@ -644,7 +645,7 @@ Since `v-ref` is no longer a directive, but a special attribute, it can also be
<p v-for="item in items" v-bind:ref="'item' + item.id"></p>
```

Previously, `v-el`/`v-ref` combined with `v-for` would produce an array of elements/components, because there was no way to give each item a unique name. You can still achieve this behavior by given each item the same `ref`:
Previously, `v-el`/`v-ref` combined with `v-for` would produce an array of elements/components, because there was no way to give each item a unique name. You can still achieve this behavior by giving each item the same `ref`:

``` html
<p v-for="item in items" ref="items"></p>
Expand Down Expand Up @@ -786,7 +787,7 @@ Vue.config.keyCodes.f1 = 112

`$dispatch` and `$broadcast` have been removed in favor of more explicitly cross-component communication and more maintainable state management solutions, such as [Vuex](https://github.com/vuejs/vuex).

The problem is event flows that depend on a component's tree structure can be hard to reason about and very brittle when the tree becomes large. It doesn't scale well and we don't want to set you up for pain later. `$dispatch` and `$broadcast` also do not solve communication between sibling components.
The problem is event flows that depend on a component's tree structure can be hard to reason about and are very brittle when the tree becomes large. They don't scale well and only set you up for pain later. `$dispatch` and `$broadcast` also do not solve communication between sibling components.

One of the most common uses for these methods is to communicate between a parent and its direct children. In these cases, you can actually [listen to an `$emit` from a child with `v-on`](components.html#Form-Input-Components-using-Custom-Events). This allows you to keep the convenience of events with added explicitness.

Expand Down Expand Up @@ -1580,4 +1581,4 @@ A benefit of functional components over partials is that they can be much more d
<h4>Upgrade Path</h4>
<p>Run the <a href="https://github.com/vuejs/vue-migration-helper">migration helper</a> on your codebase to find examples of <code>Vue.partial</code>.</p>
</div>
{% endraw %}
{% endraw %}
Loading