You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: src/guide/migration/introduction.md
+82-83Lines changed: 82 additions & 83 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -1,132 +1,131 @@
1
-
# Introduction
1
+
# Introdução
2
2
3
-
::: info
4
-
New to Vue.js? Check out our [Essentials Guide](/guide/introduction.html)to get started.
3
+
::: info
4
+
Novo em Vue.js? Veja nosso [Guia Essencial](/guide/introduction.html)para começar.
5
5
:::
6
6
7
-
This guide is primarily for users with prior Vue 2 experience who want to learn about the new features and changes in Vue 3. **This is not something you have to read from top to bottom before trying out Vue 3.**While it looks like a lot has changed, a lot of what you know and love about Vue is still the same; but we wanted to be as thorough as possible and provide detailed explanations and examples for every documented change.
7
+
Este guia é sobretudo para usuários com experiência prévia em Vue 2 que desejam aprender sobre os novos recursos e mudanças do Vue 3. **Este não é um artigo que você precise ler detalhadamente antes de experimentar o Vue 3.**Embora pareça que muita coisa mudou, muito do que você conhece e ama no Vue ainda é o mesmo; mas queríamos ser o mais completos possível fornecendo explicações detalhadas e exemplos para cada alteração documentada.
-[SFC `<style scoped>`can now include global rules or rules that target only slotted content](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
-[Síntaxe _Sugar_ para CSF que utilizem _Composition_ API (`<script setup>`)](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-script-setup.md) <Badgetext="experimental"type="warning" />
50
+
-[Variáveis CSS baseadas em estado (`<style vars>`)](https://github.com/vuejs/rfcs/blob/sfc-improvements/active-rfcs/0000-sfc-style-variables.md) <Badgetext="experimental"type="warning" />
51
+
-[`<style scoped>`em CSF agora podem incluir regras globais ou regras que visam apenas conteúdo de _slots_](https://github.com/vuejs/rfcs/blob/master/active-rfcs/0023-scoped-styles-changes.md)
52
52
53
-
## Breaking Changes
53
+
## Incompatibilidades
54
54
55
55
::: info INFO
56
-
We are still working on a dedicated Migration Build of Vue 3 with Vue 2 compatible behavior and runtime warnings of incompatible usage. If you are planning to migrate a non-trivial Vue 2 app, we strongly recommend waiting for the Migration Build for a smoother experience.
56
+
Ainda estamos trabalhando na migração dedicada do Vue 3 com comportamento compatível com o Vue 2 e avisos de tempo de execução de uso incompatível. Se você está planejando migrar um aplicativo Vue 2 mais complexo, é altamente recomendável aguardar a Distribuição de Migração para uma experiência mais tranquila.
57
57
:::
58
58
59
-
The following consists a list of breaking changes from 2.x:
59
+
A seguir, uma lista de mudanças incompatíveis com 2.x:
60
60
61
61
### Global API
62
62
63
-
-[Global Vue API is changed to use an application instance](/guide/migration/global-api.html)
64
-
-[Global and internal APIs have been restructured to be tree-shakable](/guide/migration/global-api-treeshaking.html)
63
+
-[API Global de Vue agora utiliza uma instância da aplicação](/guide/migration/global-api.html)
64
+
-[API Global e internas foram reestruturadas para _tree-shakable_](/guide/migration/global-api-treeshaking.html)
65
65
66
-
### Template Directives
66
+
### Diretivas do template
67
67
68
-
-[`v-model`usage on components has been reworked](/guide/migration/v-model.html)
69
-
-[`key`usage on `<template v-for>`and non-`v-for`nodes has changed](/guide/migration/key-attribute.html)
70
-
-[`v-if`and`v-for`precedence when used on the same element has changed](/guide/migration/v-if-v-for.html)
71
-
-[`v-bind="object"`is now order-sensitive](/guide/migration/v-bind.html)
72
-
-[`ref`inside`v-for`no longer register an array of refs](/guide/migration/array-refs.html)
68
+
-[O uso de `v-model`em componentes foi remodelado](/guide/migration/v-model.html)
69
+
-[O atributo `key`em `<template v-for>`e nós não `v-for`foi alterado](/guide/migration/key-attribute.html)
70
+
-[A precedência de `v-if`e`v-for`quando usados no mesmo elemento foi modificada](/guide/migration/v-if-v-for.html)
71
+
-[`v-bind="object"`é agora sensível à ordem de disposição](/guide/migration/v-bind.html)
72
+
-[`ref`em`v-for`não resulta mais em um array de refs](/guide/migration/array-refs.html)
73
73
74
-
### Components
74
+
### Componentes
75
75
76
-
-[Functional components can only be created using a plain function](/guide/migration/functional-components.html)
77
-
-[`functional`attribute on single-file component (SFC)`<template>`and `functional`component option are deprecated](/guide/migration/functional-components.html)
78
-
-[Async components now require `defineAsyncComponent`method to be created](/guide/migration/async-components.html)
76
+
-[Componentes funcionais só podem ser criados usando uma função simples](/guide/migration/functional-components.html)
77
+
-[Os atributos `functional`em um Componentes Single File (CSF),`<template>`e a opção componente `functional`estão obsoletas](/guide/migration/functional-components.html)
78
+
-[Componentes assíncronos necessitam de um método `defineAsyncComponent`para serem criados](/guide/migration/async-components.html)
79
79
80
-
### Render Function
80
+
### Funções de Renderização
81
81
82
-
-[Render function API changed](/guide/migration/render-function-api.html)
83
-
-[`$scopedSlots`property is removed and all slots are exposed via `$slots` as functions](/guide/migration/slots-unification.html)
82
+
-[A função de renderização da API foi modificada](/guide/migration/render-function-api.html)
83
+
-[A propriedade `$scopedSlots`foi removida e todos os seus _slots_ passam a ser obtidos como funções através de `$slots`](/guide/migration/slots-unification.html)
84
84
85
-
### Custom Elements
85
+
### Elementos personalizados
86
+
-[A lista de elementos custumizados agora são executados durante a compilação do _template_](/guide/migration/custom-elements-interop.html)
87
+
-[A propriedade especial `is` está restrita apenas à _tag_`<component>`](/guide/migration/custom-elements-interop.html#customized-built-in-elements)
86
88
87
-
-[Custom elements whitelisting is now performed during template compilation](/guide/migration/custom-elements-interop.html)
88
-
-[Special `is` prop usage is restricted to the reserved `<component>` tag only](/guide/migration/custom-elements-interop.html#customized-built-in-elements)
89
+
### Outras mudanças menores
89
90
90
-
### Other Minor Changes
91
+
- A opção de ciclo de vida `destroyed` foi renomeada para `unmounted`
92
+
- A opção de ciclo de vida `beforeDestroy` foi renomeada para `beforeUnmount`
93
+
-[A propriedade `default` da função construtora não acessa mais o contexto `this`](/guide/migration/props-default-this.html)
94
+
-[A API de diretivas costumizadas foi modificada para se alinhar ao ciclo de vida do componente](/guide/migration/custom-directives.html)
95
+
-[A opção `data` deverá sempre ser declarada como uma função](/guide/migration/data-option.html)
96
+
-[A opção `data` de mixins is now merged shallowly](/guide/migration/data-option.html#mixin-merge-behavior-change)
97
+
-[Estratégia de coerção de atributos foi alterada](/guide/migration/attribute-coercion.html)
98
+
-[Algumas classes de transição foram renomeadas](/guide/migration/transition.html)
99
+
-[O `callback` de um `array` que está sendo observado só será acionado quando este for substituído. Caso você precise chama-lo dentro de uma `mutattion`, a opção `deep` deve ser especificada.](/guide/migration/watch.html)
100
+
- As tags `<template>` sem diretivas especiais (`v-if/else-if/else`, `v-for`, ou `v-slot`) agora são tratadas como elementos simples resultando em um elemento `<template>` nativo ao invez de renderizar seu conteúdo interno.
101
+
- No Vue 2.x, o _container_ raiz da aplicação `outerHTML` é substituído pelo _template_ do componente raiz (ou eventualmente compilado em um _template_, se o componente raiz não dispuser da opção _template_/renderização). Vue 3.x agora usa o _conteiner_ da aplicação `innerHTML` ao invés - isto é, o próprio container não é mais considerado parte do _template_.
91
102
92
-
- The `destroyed` lifecycle option has been renamed to `unmounted`
93
-
- The `beforeDestroy` lifecycle option has been renamed to `beforeUnmount`
94
-
-[Props `default` factory function no longer has access to `this` context](/guide/migration/props-default-this.html)
95
-
-[Custom directive API changed to align with component lifecycle](/guide/migration/custom-directives.html)
96
-
-[The `data` option should always be declared as a function](/guide/migration/data-option.html)
97
-
-[The `data` option from mixins is now merged shallowly](/guide/migration/data-option.html#mixin-merge-behavior-change)
-[Some transition classes got a rename](/guide/migration/transition.html)
100
-
-[When watching an array, the callback will only trigger when the array is replaced. If you need to trigger on mutation, the `deep` option must be specified.](/guide/migration/watch.html)
101
-
-`<template>` tags with no special directives (`v-if/else-if/else`, `v-for`, or `v-slot`) are now treated as plain elements and will result in a native `<template>` element instead of rendering its inner content.
102
-
- In Vue 2.x, application root container's `outerHTML` is replaced with root component template (or eventually compiled to a template, if root component has no template/render option). Vue 3.x now uses application container's `innerHTML` instead - this means the container itself is no longer considered part of the template.
103
+
### APIs removidas
103
104
104
-
### Removed APIs
105
+
-[Suporte `keyCode` como modificadores `v-on`](/guide/migration/keycode-modifiers.html)
106
+
-[Instância dos métodos $on, $off e \$once](/guide/migration/events-api.html)
107
+
-[Filtros](/guide/migration/filters.html)
108
+
-[Atributos `inline` nos _templates_](/guide/migration/inline-template-attribute.html)
109
+
- Instância do método `$destroy`. Os usuários não devem mais acessar manualmente o ciclo de vida de componentes indiviuais Vue.
105
110
106
-
-[`keyCode` support as `v-on` modifiers](/guide/migration/keycode-modifiers.html)
107
-
-[$on, $off and \$once instance methods](/guide/migration/events-api.html)
-`$destroy` instance method. Users should no longer manually manage the lifecycle of individual Vue components.
111
+
## Bibliotecas suportadas
111
112
112
-
## Supporting Libraries
113
-
114
-
All of our official libraries and tools now support Vue 3, but most of them are still in beta status and distributed under the `next` dist tag on npm. **We are planning to stabilize and switch all projects to use the `latest` dist tag by end of 2020.**
113
+
Todas as nossas bibliotecas e ferramentas oficiais agora oferecem suporte ao Vue 3, mas, a maioria delas ainda está em _status_ beta e distribuídas sob a _tag_`next` no NPM. **Estamos planejando estabilizar e mudar todos os projetos para usar a tag `latest` até o final de 2020.**
As of v4.5.0, `vue-cli`now provides built-in option to choose Vue 3 preset when creating a new project. You can upgrade `vue-cli`and run `vue create`to create a Vue 3 project today.
119
+
A partir da v4.5.0, `vue-cli`agora oferece opção integrada para escolher a pre-definição Vue 3 ao criar um novo projeto. Você pode atualizar o `vue-cli`e executar o `vue create`para criar um projeto Vue 3 hoje.
Vue Router 4.0 provides Vue 3 support and has a number of breaking changes of its own. Check out its [README](https://github.com/vuejs/vue-router-next#vue-router-next-)for full details.
128
+
Vue Router 4.0 provê suporte ao Vue 3, possuindo uma série de modificações relevantes próprias. Leia o [README](https://github.com/vuejs/vue-router-next#vue-router-next-)para verificar todos os detalhes.
Vuex 4.0 provides Vue 3 support with largely the same API as 3.x. The only breaking change is [how the plugin is installed](https://github.com/vuejs/vuex/tree/4.0#breaking-changes).
137
+
Vuex 4.0 provê suporte ao Vue 3 com basicamente a mesma API que o 3.x. A única modificação importante é em [como o plugin é instalado](https://github.com/vuejs/vuex/tree/4.0#breaking-changes).
139
138
140
139
-[GitHub](https://github.com/vuejs/vuex/tree/4.0)
141
140
142
-
### Devtools Extension
141
+
### Extensão para desenvolvedores
143
142
144
-
We are working on a new version of the Devtools with a new UI and refactored internals to support multiple Vue versions. The new version is currently in beta and only supports Vue 3 (for now). Vuex and Router integration is also work in progress.
143
+
Estamos trabalhando em uma nova versão do _Devtools_ com uma nova IU e refatoração interna para oferecer suporte a várias versões do Vue. A nova versão está atualmente em beta e suporta apenas Vue 3 (por enquanto). A integração do Vuex e do Router também está em andamento.
145
144
146
-
-For Chrome: [Install from Chrome web store](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en)
145
+
-Para navegador Chrome: [Instale da Chrome web store](https://chrome.google.com/webstore/detail/vuejs-devtools/ljjemllljcmogpfapbkkighbhhppjdbg?hl=en)
147
146
148
-
-Note: the beta channel may conflict with the stable version of devtools so you may need to temporarily disable the stable version for the beta channel to work properly.
147
+
-Nota: o canal beta pode entrar em conflito com a versão estável do _devtools_, então pode ser necessário desabilitar temporariamente a versão estável para que a versão beta funcione corretamente.
149
148
150
-
-For Firefox: [Download the signed extension](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2) (`.xpi`file under Assets)
149
+
-Para navegador Firefox: [Baixe a extensão assinada](https://github.com/vuejs/vue-devtools/releases/tag/v6.0.0-beta.2) (Arquivo `.xpi`em Assets)
151
150
152
-
### IDE Support
151
+
### Suporte IDE
153
152
154
-
It is recommended to use[VSCode](https://code.visualstudio.com/)with our official extension[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), which provides comprehensive IDE support for Vue 3.
153
+
É recomendado o uso do[VSCode](https://code.visualstudio.com/)com a extensão oficial[Vetur](https://marketplace.visualstudio.com/items?itemName=octref.vetur), a qual provê suporte à IDE para Vue 3.
0 commit comments