Translation of guide/reactivity-computed-watchers

Author: GuiDevloper

src/guide/reactivity-computed-watchers.md

@@ -1,21 +1,21 @@
-# Computed and Watch
+# Dados Computados e Observadores
 
-> This section uses [single-file component](single-file-component.html) syntax for code examples
+> Esta seção usa a sintaxe de [componente de single-file](single-file-component.html) para exemplos de código
 
-## Computed values
+## Valores computados
 
-Sometimes we need state that depends on other state - in Vue this is handled with component [computed properties](computed.html#computed-properties). To directly create a computed value, we can use the `computed` function: it takes a getter function and returns an immutable reactive [ref](reactivity-fundamentals.html#creating-standalone-reactive-values-as-refs) object for the returned value from the getter.
+Às vezes precisamos de um estado que depende de outro estado - no Vue isso é tratado com [dados computados](computed.html#computed-properties) do componente. Para criar diretamente um valor computado, podemos usar a função `computed`: ela pega uma função _getter_ e retorna um objeto reativo imutável [ref](reactivity-fundamentals.html#criacao-de-valores-reativos-avulsos-como-refs) para o valor retornado do _getter_.
 
 ```js
 const count = ref(1)
 const plusOne = computed(() => count.value + 1)
 
 console.log(plusOne.value) // 2
 
-plusOne.value++ // error
+plusOne.value++ // erro
 ```
 
-Alternatively, it can take an object with `get` and `set` functions to create a writable ref object.
+Alternativamente, ele pode receber um objeto com as funções `get` e `set` para criar um objeto _ref_ modificável.
 
 ```js
 const count = ref(1)
@@ -30,102 +30,102 @@ plusOne.value = 1
 console.log(count.value) // 0
 ```
 
-### Computed Debugging <Badge text="3.2+" />
+### Depuração de Computados <Badge text="3.2+" />
 
-`computed` accepts a second argument with `onTrack` and `onTrigger` options:
+`computed` aceita um segundo argumento com as opções `onTrack` e `onTrigger`:
 
-- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
-- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
+- `onTrack` será chamado quando uma propriedade reativa ou _ref_ for rastreada como uma dependência.
+- `onTrigger` será chamado quando o _callback_ do observador for acionado pela mutação de uma dependência.
 
-Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
+Ambos os _callbacks_ receberão um evento depurador que contém informações sobre a dependência em questão. Recomenda-se colocar uma instrução `debugger` nesses _callbacks_ para inspecionar interativamente a dependência:
 
 ```js
 const plusOne = computed(() => count.value + 1, {
   onTrack(e) {
-    // triggered when count.value is tracked as a dependency
+    // acionado quando count.value é rastreado como uma dependência
     debugger
   },
   onTrigger(e) {
-    // triggered when count.value is mutated
+    // acionado quando count.value é modificado
     debugger
   }
 })
 
-// access plusOne, should trigger onTrack
+// acessa plusOne, deve acionar onTrack
 console.log(plusOne.value)
 
-// mutate count.value, should trigger onTrigger
+// muda count.value, deve acionar onTrigger
 count.value++
 ```
 
-`onTrack` and `onTrigger` only work in development mode.
+`onTrack` e `onTrigger` só funcionam no modo de desenvolvimento.
 
 ## `watchEffect`
 
-To apply and _automatically re-apply_ a side effect based on reactive state, we can use the `watchEffect` function. It runs a function immediately while reactively tracking its dependencies and re-runs it whenever the dependencies are changed.
+Para aplicar e _automaticamente reaplicar_ um efeito colateral baseado no estado reativo, podemos usar a função `watchEffect`. Ela executa uma função imediatamente enquanto rastreia de forma reativa suas dependências e a executa novamente sempre que as dependências são alteradas.
 
 ```js
 const count = ref(0)
 
 watchEffect(() => console.log(count.value))
-// -> logs 0
+// -> loga 0
 
 setTimeout(() => {
   count.value++
-  // -> logs 1
+  // -> loga 1
 }, 100)
 ```
 
-### Stopping the Watcher
+### Parando o Observador
 
-When `watchEffect` is called during a component's [setup()](composition-api-setup.html) function or [lifecycle hooks](composition-api-lifecycle-hooks.html), the watcher is linked to the component's lifecycle and will be automatically stopped when the component is unmounted.
+Quando `watchEffect` é chamado durante a função [setup()](composition-api-setup.html) de um componente ou [gatilhos do ciclo de vida](composition-api-lifecycle-hooks.html), o observador é vinculado ao ciclo de vida do componente e será interrompido automaticamente quando o componente for desmontado.
 
-In other cases, it returns a stop handle which can be called to explicitly stop the watcher:
+Em outros casos, ele retorna um manipulador de parada que pode ser chamado para parar explicitamente o observador:
 
 ```js
 const stop = watchEffect(() => {
   /* ... */
 })
 
-// later
+// depois
 stop()
 ```
 
-### Side Effect Invalidation
+### Invalidação de Efeito Colateral
 
-Sometimes the watched effect function will perform asynchronous side effects that need to be cleaned up when it is invalidated (i.e. state changed before the effects can be completed). The effect function receives an `onInvalidate` function that can be used to register an invalidation callback. This invalidation callback is called when:
+Às vezes, a função do efeito observado executará efeitos colaterais assíncronos que precisam ser limpos quando forem invalidados (ou seja, estado alterado antes que os efeitos possam ser concluídos). A função de efeito recebe uma função `onInvalidate` que pode ser usada para registrar um _callback_ de invalidação. Esse _callback_ de invalidação é chamado quando:
 
-- the effect is about to re-run
-- the watcher is stopped (i.e. when the component is unmounted if `watchEffect` is used inside `setup()` or lifecycle hooks)
+- o efeito está prestes a ser executado novamente
+- o observador é parado (ou seja, quando o componente é desmontado se `watchEffect` for usado dentro de `setup()` ou gatilhos de ciclo de vida)
 
 ```js
 watchEffect(onInvalidate => {
   const token = performAsyncOperation(id.value)
   onInvalidate(() => {
-    // id has changed or watcher is stopped.
-    // invalidate previously pending async operation
+    // id foi alterado ou o observador está parado.
+    // invalida a operação assíncrona pendente anteriormente
     token.cancel()
   })
 })
 ```
 
-We are registering the invalidation callback via a passed-in function instead of returning it from the callback because the return value is important for async error handling. It is very common for the effect function to be an async function when performing data fetching:
+Estamos registrando o _callback_ de invalidação por meio de uma função passada em vez de retorná-lo do _callback_ porque o valor retornado é importante para o tratamento de erros assíncronos. É muito comum que a função de efeito seja uma função assíncrona ao realizar a requisição de dados:
 
 ```js
 const data = ref(null)
 watchEffect(async onInvalidate => {
   onInvalidate(() => {
     /* ... */
-  }) // we register cleanup function before Promise resolves
+  }) // registramos a função de limpeza antes que a Promise seja resolvida
   data.value = await fetchData(props.id)
 })
 ```
 
-An async function implicitly returns a Promise, but the cleanup function needs to be registered immediately before the Promise resolves. In addition, Vue relies on the returned Promise to automatically handle potential errors in the Promise chain.
+Uma função assíncrona retorna implicitamente uma Promise, mas a função de limpeza precisa ser registrada imediatamente antes que a Promise seja resolvida. Além disso, o Vue depende da Promise retornada para lidar automaticamente com possíveis erros na cadeia de Promises.
 
-### Effect Flush Timing
+### Momento de Limpeza do Efeito
 
-Vue's reactivity system buffers invalidated effects and flushes them asynchronously to avoid unnecessary duplicate invocation when there are many state mutations happening in the same "tick". Internally, a component's `update` function is also a watched effect. When a user effect is queued, it is by default invoked **before** all component `update` effects:
+O sistema de reatividade do Vue armazena em _buffer_ os efeitos invalidados e os libera de forma assíncrona para evitar invocação duplicada desnecessária quando há muitas mutações de estado acontecendo no mesmo "tick". Internamente, a função `update` de um componente também é um efeito observado. Quando um efeito de usuário é enfileirado, ele é invocado por padrão **antes** de todos os efeitos de `update` do componente:
 
 ```vue
 <template>
@@ -149,17 +149,17 @@ export default {
 </script>
 ```
 
-In this example:
+Neste exemplo:
 
-- The count will be logged synchronously on initial run.
-- When `count` is mutated, the callback will be called **before** the component has updated.
+- A contagem será registrada de forma síncrona na execução inicial.
+- Quando `count` for modificado, o callback será chamado **antes** de o componente ser atualizado.
 
-In cases where a watcher effect needs to be re-run **after** component updates (i.e. when working with [Template Refs](./composition-api-template-refs.md#watching-template-refs)), we can pass an additional `options` object with the `flush` option (default is `'pre'`):
+Nos casos em que um efeito de observador precisa ser executado novamente **após** atualizações de componentes (ou seja, ao trabalhar com [_Refs_ de _Template_](./composition-api-template-refs.md#observando-refs-de-template)), nós podemos passar um objeto `options` adicional com a opção `flush` (o padrão é `'pre'`):
 
 ```js
-// fire after component updates so you can access the updated DOM
-// Note: this will also defer the initial run of the effect until the
-// component's first render is finished.
+// dispara após atualizações de componentes para que você possa acessar o DOM atualizado
+// Nota: isso também adiará a execução inicial do efeito até
+// a primeira renderização do componente ser finalizada.
 watchEffect(
   () => {
     /* ... */
@@ -170,23 +170,23 @@ watchEffect(
 )
 ```
 
-The `flush` option also accepts `'sync'`, which forces the effect to always trigger synchronously. This is however inefficient and should be rarely needed.
+A opção `flush` também aceita `'sync'`, o que força o efeito a sempre disparar de forma síncrona. No entanto, isso é ineficiente e raramente deve ser necessário.
 
-In Vue >= 3.2.0, `watchPostEffect` and `watchSyncEffect` aliases can also be used to make the code intention more obvious.
+No Vue >= 3.2.0, os apelidos `watchPostEffect` e `watchSyncEffect` também podem ser usados ​​para tornar a intenção do código mais óbvia.
 
-### Watcher Debugging
+### Depuração do Observador
 
-The `onTrack` and `onTrigger` options can be used to debug a watcher's behavior.
+As opções `onTrack` e `onTrigger` podem ser usadas para depurar o comportamento de um observador.
 
-- `onTrack` will be called when a reactive property or ref is tracked as a dependency.
-- `onTrigger` will be called when the watcher callback is triggered by the mutation of a dependency.
+- `onTrack` será chamado quando uma propriedade reativa ou _ref_ for rastreada como uma dependência.
+- `onTrigger` será chamado quando o _callback_ do observador for acionado pela mutação de uma dependência.
 
-Both callbacks will receive a debugger event which contains information on the dependency in question. It is recommended to place a `debugger` statement in these callbacks to interactively inspect the dependency:
+Ambos os _callbacks_ receberão um evento depurador que contém informações sobre a dependência em questão. Recomenda-se colocar uma instrução `debugger` nesses _callbacks_ para inspecionar interativamente a dependência:
 
 ```js
 watchEffect(
   () => {
-    /* side effect */
+    /* efeito colateral */
   },
   {
     onTrigger(e) {
@@ -196,24 +196,24 @@ watchEffect(
 )
 ```
 
-`onTrack` and `onTrigger` only work in development mode.
+`onTrack` e `onTrigger` só funcionam no modo de desenvolvimento.
 
 ## `watch`
 
-The `watch` API is the exact equivalent of the component [watch](computed.html#watchers) property. `watch` requires watching a specific data source and applies side effects in a separate callback function. It also is lazy by default - i.e. the callback is only called when the watched source has changed.
+A API `watch` é o equivalente exato da propriedade [watch](computed.html#observadores) do componente. `watch` requer a observação de uma fonte de dados específica e aplica efeitos colaterais em um _callback_ separado. Também é preguiçoso por padrão - ou seja, o _callback_ só é chamado quando a fonte observada foi alterada.
 
-- Compared to [watchEffect](#watcheffect), `watch` allows us to:
+- Comparado com [watchEffect](#watcheffect), `watch` nos permite:
 
-  - Perform the side effect lazily;
-  - Be more specific about what state should trigger the watcher to re-run;
-  - Access both the previous and current value of the watched state.
+  - Executar o efeito colateral preguiçosamente;
+  - Ser mais específico sobre qual estado deve acionar o observador para executar novamente;
+  - Acessar o valor anterior e atual do estado observado.
 
-### Watching a Single Source
+### Observando uma Única Fonte
 
-A watcher data source can either be a getter function that returns a value, or directly a `ref`:
+Uma fonte de dados do observador pode ser uma função _getter_ que retorna um valor ou diretamente um `ref`:
 
-```js
-// watching a getter
+``` js
+// observando um getter
 const state = reactive({ count: 0 })
 watch(
   () => state.count,
@@ -222,16 +222,16 @@ watch(
   }
 )
 
-// directly watching a ref
+// observando diretamente um ref
 const count = ref(0)
 watch(count, (count, prevCount) => {
   /* ... */
 })
 ```
 
-### Watching Multiple Sources
+### Observando Várias Fontes
 
-A watcher can also watch multiple sources at the same time using an array:
+Um observador também pode observar várias fontes ao mesmo tempo usando um array:
 
 ```js
 const firstName = ref('')
@@ -245,7 +245,7 @@ firstName.value = 'John' // logs: ["John", ""] ["", ""]
 lastName.value = 'Smith' // logs: ["John", "Smith"] ["John", ""]
 ```
 
-However, if you are changing both watched sources simultaneously in the same function, the watcher will be executed only once:
+No entanto, se você estiver alterando as duas fontes observadas simultaneamente na mesma função, o observador será executado apenas uma vez:
 
 ```js{9-13}
 setup() {
@@ -266,9 +266,9 @@ setup() {
 }
 ```
 
-Note that multiple synchronous changes will only trigger the watcher once.
+Observe que várias alterações síncronas acionarão o observador apenas uma vez.
 
-It is possible to force the watcher to trigger after every change by using the setting `flush: 'sync'`, though that isn't usually recommended. Alternatively, [nextTick](/api/global-api.html#nexttick) can be used to wait for the watcher to run before making further changes. e.g.:
+É possível forçar o observador a disparar após cada mudança usando a configuração `flush: 'sync'`, embora isso geralmente não seja recomendado. Como alternativa, [nextTick](/api/global-api.html#nexttick) pode ser usado para aguardar a execução do observador antes de fazer outras alterações. por exemplo.:
 
 ```js
 const changeValues = async () => {
@@ -278,9 +278,9 @@ const changeValues = async () => {
 }
 ```
 
-### Watching Reactive Objects
+### Observando Objetos Reativos
 
-Using a watcher to compare values of an array or object that are reactive requires that it has a copy made of just the values.
+Usar um observador para comparar valores de um array ou objeto que são reativos requer que ele tenha uma cópia feita apenas dos valores.
 
 ```js
 const numbers = reactive([1, 2, 3, 4])
@@ -295,7 +295,7 @@ watch(
 numbers.push(5) // logs: [1,2,3,4,5] [1,2,3,4]
 ```
 
-Attempting to check for changes of properties in a deeply nested object or array will still require the `deep` option to be true:
+A tentativa de verificar alterações de propriedades em um objeto ou array profundamente aninhado ainda exigirá que a opção `deep` seja verdadeira:
 
 ```js
 const state = reactive({
@@ -320,10 +320,10 @@ watch(
   { deep: true }
 )
 
-state.attributes.name = 'Alex' // Logs: "deep" "Alex" "Alex"
+state.attributes.name = 'Alex' // Loga: "deep" "Alex" "Alex"
 ```
 
-However, watching a reactive object or array will always return a reference to the current value of that object for both the current and previous value of the state. To fully watch deeply nested objects and arrays, a deep copy of values may be required. This can be achieved with a utility such as [lodash.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
+No entanto, observar um objeto ou array reativo sempre retornará uma referência ao valor atual desse objeto para ambos o valor atual e anterior do estado. Para observar completamente objetos e arrays profundamente aninhados, pode ser necessária uma cópia profunda dos valores. Isso pode ser feito com um utilitário como [lodash.cloneDeep](https://lodash.com/docs/4.17.15#cloneDeep)
 
 ```js
 import _ from 'lodash'
@@ -342,9 +342,9 @@ watch(
   }
 )
 
-state.attributes.name = 'Alex' // Logs: "Alex" ""
+state.attributes.name = 'Alex' // Loga: "Alex" ""
 ```
 
-### Shared Behavior with `watchEffect`
+### Comportamento Compartilhado com `watchEffect`
 
-`watch` shares behavior with [`watchEffect`](#watcheffect) in terms of [manual stoppage](#stopping-the-watcher), [side effect invalidation](#side-effect-invalidation) (with `onInvalidate` passed to the callback as the 3rd argument instead), [flush timing](#effect-flush-timing) and [debugging](#watcher-debugging).
+`watch` compartilha comportamento com [`watchEffect`](#watcheffect) em termos de [parada manual](#parando-o-observador), [invalidação de efeito colateral](#invalidacao-de-efeito-colateral) (com `onInvalidate` passado ao _callback_ como o terceiro argumento), [momento de limpeza](#momento-de-limpeza-do-efeito) e [depuração](#depuracao-do-observador).