Tradução de "guide/migration/custom-directives.md"

closes #87

Author: Lucas Castro

src/guide/migration/custom-directives.md

@@ -1,33 +1,33 @@
 ---
 badges:
-  - breaking
+  - Urgente
 ---
 
-# Custom Directives <MigrationBadges :badges="$frontmatter.badges" />
+# Diretivas Personalizadas <MigrationBadges :badges="$frontmatter.badges" />
 
-## Overview
+## Visão Geral
 
-Here is a quick summary of what has changed:
+Aqui está um rápido resumo do que mudou:
 
-- API has been renamed to better align with component lifecycle
-- Custom directives will be controlled by child component via `v-bind="$attrs"`
+- API foi renomeada para se alinhar melhor com o ciclo de vida do componente
+- As diretivas personalizadas serão controladas pelo componente filho via `v-bind="$attrs"`
 
-For more information, read on!
+Para mais informações, continue lendo!
 
-## 2.x Syntax
+## Sintaxe 2.x
 
-In Vue 2, custom directives were created by using the hooks listed below to target an element’s lifecycle, all of which are optional:
+No Vue 2, as diretivas personalizadas foram criadas usando os ganchos listados abaixo para direcionar o ciclo de vida de um elemento, todos opcionais:
 
-- **bind** - Occurs once the directive is bound to the element. Occurs only once.
-- **inserted** - Occurs once the element is inserted into the parent DOM.
-- **update** - This hook is called when the element updates, but children haven't been updated yet.
-- **componentUpdated** - This hook is called once the component and the children have been updated.
-- **unbind** - This hook is called once the directive is removed. Also called only once.
+- **bind** - Ocorre quando a diretiva é vinculada ao elemento. Ocorre apenas uma vez.
+- **inserted** - Ocorre quando o elemento é inserido no DOM pai.
+- **update** - Este gancho é chamado quando o elemento é atualizado, mas os filhos ainda não foram atualizados.
+- **componentUpdated** - Este gancho é chamado assim que o componente e os filhos forem atualizados.
+- **unbind** - Este gancho é chamado assim que a diretiva é removida. Também chamado apenas uma vez.
 
-Here’s an example of this:
+Aqui está um exemplo disso:
 
 ```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="yellow">Destaque este texto em amarelo claro</p>
 ```
 
 ```js
@@ -38,37 +38,37 @@ Vue.directive('highlight', {
 })
 ```
 
-Here, in the initial setup for this element, the directive binds a style by passing in a value, that can be updated to different values through the application.
+Aqui, na configuração inicial desse elemento, a diretiva vincula um estilo passando um valor, que pode ser atualizado para diferentes valores por meio da aplicação.
 
-## 3.x Syntax
+## Sintaxe 3.x
 
-In Vue 3, however, we’ve created a more cohesive API for custom directives. As you can see, they differ greatly from our component lifecycle methods even though we’re hooking into similar events. We’ve now unified them like so:
+No Vue 3, no entanto, criamos uma API mais coesa para diretivas personalizadas. Como você pode ver, eles diferem muito de nossos métodos de ciclo de vida de componentes, embora estejamos nos conectando a eventos semelhantes. Agora, nós os unificamos assim:
 
 - bind → **beforeMount**
 - inserted → **mounted**
-- **beforeUpdate**: new! this is called before the element itself is updated, much like the component lifecycle hooks.
-- update → removed! There were too many similarities to updated, so this is redundant. Please use updated instead.
+- **beforeUpdate**: novo! isso é chamado antes que o próprio elemento seja atualizado, de forma muito semelhante aos ganchos do ciclo de vida do componente.
+- update → removido! Havia muitas semelhanças para atualizar, então isso é redundante. Em vez disso, use "updated".
 - componentUpdated → **updated**
-- **beforeUnmount** new! similar to component lifecycle hooks, this will be called right before an element is unmounted.
+- **beforeUnmount**: novo! semelhante aos ganchos do ciclo de vida do componente, isso será chamado logo antes de um elemento ser desmontado.
 - unbind -> **unmounted**
 
-The final API is as follows:
+A API final é a seguinte:
 
 ```js
 const MyDirective = {
   beforeMount(el, binding, vnode, prevVnode) {},
   mounted() {},
   beforeUpdate() {},
   updated() {},
-  beforeUnmount() {}, // new
+  beforeUnmount() {}, // novo
   unmounted() {}
 }
 ```
 
-The resulting API could be used like this, mirroring the example from earlier:
+A API resultante poderia ser usada assim, espelhando o exemplo anterior:
 
 ```html
-<p v-highlight="yellow">Highlight this text bright yellow</p>
+<p v-highlight="yellow">Destaque este texto em amarelo claro</p>
 ```
 
 ```js
@@ -81,48 +81,48 @@ app.directive('highlight', {
 })
 ```
 
-Now that the custom directive lifecycle hooks mirror those of the components themselves, they become easier to reason about and remember!
+Agora que os ganchos do ciclo de vida da diretiva personalizada espelham os dos próprios componentes, eles se tornam mais fáceis de raciocinar e lembrar!
 
-### Edge Case: Accessing the component instance
+### Caso Isolado: Acessando a instância do componente
 
-It's generally recommended to keep directives independent of the component instance they are used in. Accessing the instance from within a custom directive is often a sign that the directive should rather be a component itself. However, there are situations where this actually makes sense.
+Geralmente, é recomendado manter as diretivas independentes da instância do componente em que são usadas. Acessar a instância a partir de uma diretiva personalizada costuma ser um sinal de que a diretiva deve ser um componente em si. No entanto, existem situações em que isso realmente faz sentido.
 
-In Vue 2, the component instance had to be accessed through the `vnode` argument:
+No Vue 2, a instância do componente tinha que ser acessada por meio do argumento `vnode`:
 
 ```javascript
 bind(el, binding, vnode) {
   const vm = vnode.context
 }
 ```
 
-In Vue 3, the instance is now part of the `binding`:
+No Vue 3, a instância agora faz parte do `binding`:
 
 ```javascript
 mounted(el, binding, vnode) {
   const vm = binding.instance
 }
 ```
 
-## Implementation Details
+## Detalhes de Implementação
 
-In Vue 3, we're now supporting fragments, which allow us to return more than one DOM node per component. You can imagine how handy that is for something like a component with multiple `<li>` elements or the children elements of a table:
+No Vue 3, agora oferecemos suporte a fragmentos, o que nos permite retornar mais de um nó DOM por componente. Você pode imaginar como isso é útil para algo como um componente com vários elementos `<li>` ou os elementos filhos de uma tabela:
 
 ```html
 <template>
-  <li>Hello</li>
-  <li>Vue</li>
-  <li>Devs!</li>
+  <li>Olá</li>
+  <li>Desenvolvedores</li>
+  <li>Vue!</li>
 </template>
 ```
 
-As wonderfully flexible as this is, we can potentially encounter a problem with a custom directive that could have multiple root nodes.
+Tão maravilhosamente flexível quanto isso é, podemos potencialmente encontrar um problema com uma diretiva personalizada que pode ter vários nós raiz.
 
-As a result, custom directives are now included as part of a virtual DOM node’s data. When a custom directive is used on a component, hooks are passed down to the component as extraneous props and end up in `this.$attrs`.
+Como resultado, as diretivas personalizadas agora são incluídas como parte dos dados de um nó virtual do DOM. Quando uma diretiva personalizada é usada em um componente, ganchos são passados para o componente como props estranhos e acabam em `this.$attrs`.
 
-This also means it's possible to directly hook into an element's lifecycle like this in the template, which can be handy when a custom directive is too involved:
+Isso também significa que é possível conectar-se diretamente ao ciclo de vida de um elemento como este modelo, o que pode ser útil quando uma diretiva personalizada está muito envolvida:
 
 ```html
 <div @vnodeMounted="myHook" />
 ```
 
-This is consistent with the attribute fallthrough behavior, so when a child component uses `v-bind="$attrs"` on an inner element, it will apply any custom directives used on it as well.
+Isso é consistente com o comportamento de "fallthrough" do atributo, portanto, quando um componente filho usa `v-bind="$attrs"` em um elemento interno, ele também aplica todas as diretivas personalizadas usadas nele.