Update data-methods.md

Translate from english to portuguese.

Author: fabiodepin

src/guide/data-methods.md

@@ -1,10 +1,10 @@
-# Data Properties and Methods
+# Propriedades de dados e Métodos
 
 <VideoLesson href="https://vueschool.io/lessons/methods-in-vue-3?friend=vuejs" title="Aprenda a usar métodos na Vue School">Aprenda a trabalhar com dados e métodos com uma aula gratuita da Vue School</VideoLesson>
 
-## Data Properties
+## Propriedades de dados
 
-The `data` option for a component is a function. Vue calls this function as part of creating a new component instance. It should return an object, which Vue will then wrap in its reactivity system and store on the component instance as `$data`. For convenience, any top-level properties of that object are also exposed directly via the component instance:
+A opção `data` para um componente é uma função. Vue chama essa função como parte da criação de uma nova instância de componente. Ele deve retornar um objeto, que o Vue irá envolver em seu sistema de reatividade e armazenar na instância do componente como `$data`. Por conveniência, quaisquer propriedades de nível superior desse objeto também são expostos diretamente por meio da instância do componente:
 
 ```js
 const app = Vue.createApp({
@@ -18,24 +18,25 @@ const vm = app.mount('#app')
 console.log(vm.$data.count) // => 4
 console.log(vm.count)       // => 4
 
-// Assigning a value to vm.count will also update $data.count
+// Atribuir um valor a vm.count também atualizará $data.count
 vm.count = 5
 console.log(vm.$data.count) // => 5
 
-// ... and vice-versa
+// ... e vice-versa
 vm.$data.count = 6
 console.log(vm.count) // => 6
 ```
 
-These instance properties are only added when the instance is first created, so you need to ensure they are all present in the object returned by the `data` function. Where necessary, use `null`, `undefined` or some other placeholder value for properties where the desired value isn't yet available.
+Essas propriedades de instância são adicionadas apenas quando a instância é criada pela primeira vez, então você precisa garantir que todas estejam presentes no objeto retornado pela função `data`. Onde necessário, use `null`,`undefined` ou algum outro valor de espaço reservado para propriedades onde o valor desejado ainda não está disponível.
 
-It is possible to add a new property directly to the component instance without including it in `data`. However, because this property isn't backed by the reactive `$data` object, it won't automatically be tracked by [Vue's reactivity system](reactivity.html).
+É possível adicionar uma nova propriedade diretamente à instância do componente sem incluí-la em `data`. No entanto, como essa propriedade não é suportada pelo objeto reativo `$data`, ela não será rastreada automaticamente pelo [sistema de reatividade do Vue](reactivity.html).
 
-Vue uses a `$` prefix when exposing its own built-in APIs via the component instance. It also reserves the prefix `_` for internal properties. You should avoid using names for top-level `data` properties that start with either of these characters.
+O Vue usa o prefixo `$` ao expor suas próprias APIs integradas por meio da instância do componente. Ele também reserva o prefixo `_` para propriedades internas. Você deve evitar usar nomes para propriedades `data` de nível superior que começam com qualquer um desses caracteres.
 
-## Methods
 
-To add methods to a component instance we use the `methods` option. This should be an object containing the desired methods:
+## Métodos
+
+Para adicionar métodos a uma instância do componente, usamos a opção `methods`. Isto deve ser um objeto contendo os métodos desejados:
 
 ```js
 const app = Vue.createApp({
@@ -44,7 +45,7 @@ const app = Vue.createApp({
   },
   methods: {
     increment() {
-      // `this` will refer to the component instance
+      // `this` irá se referir à instância do componente
       this.count++
     }
   }
@@ -59,33 +60,34 @@ vm.increment()
 console.log(vm.count) // => 5
 ```
 
-Vue automatically binds the `this` value for `methods` so that it always refers to the component instance. This ensures that a method retains the correct `this` value if it's used as an event listener or callback. You should avoid using arrow functions when defining `methods`, as that prevents Vue from binding the appropriate `this` value.
+O Vue vincula automaticamente o valor `this` para `methods` para que sempre se refira à instância do componente. Isso garante que um método retenha o valor `this` correto se for usado como um ouvinte de evento ou retorno de chamada. Você deve evitar o uso de funções de seta ao definir `methods`, pois isso impede que o Vue vincule o valor `this` apropriado.
 
-Just like all other properties of the component instance, the `methods` are accessible from within the component's template. Inside a template they are most commonly used as event listeners:
+Assim como todas as outras propriedades da instância do componente, os métodos em `methods` são acessíveis a partir do template do componente. Dentro de um modelo, eles são mais comumente usados como ouvintes de eventos:
 
 ```html
 <button @click="increment">Up vote</button>
 ```
 
-In the example above, the method `increment` will be called when the `<button>` is clicked.
+No exemplo acima, o método `increment` será chamado quando o `<button>` for clicado.
 
-It is also possible to call a method directly from a template. As we'll see shortly, it's usually better to use a [computed property](computed.html) instead. However, using a method can be useful in scenarios where computed properties aren't a viable option. You can call a method anywhere that a template supports JavaScript expressions:
+Também é possível chamar um método diretamente de um modelo. Como veremos em breve, geralmente é melhor usar uma [propriedade computada](computed.html) em vez disso. No entanto, usar um método pode ser útil em cenários onde as propriedades computadas não são uma opção viável. Você pode chamar um método em qualquer lugar em que um modelo suporte expressões JavaScript:
 
 ```html
 <span :title="toTitleDate(date)">
   {{ formatDate(date) }}
 </span>
 ```
 
-If the methods `toTitleDate` or `formatDate` access any reactive data then it will be tracked as a rendering dependency, just as if it had been used in the template directly.
+Se os métodos `toTitleDate` ou `formatDate` acessam qualquer dado reativo, ele será rastreado como uma dependência de renderização, como se tivesse sido usado diretamente no template.
+
+Os métodos chamados a partir de um modelo não devem ter efeitos colaterais, como alteração de dados ou acionamento de processos assíncronos. Se você se sentir tentado a fazer isso, provavelmente deve usar um [lifecycle hook](instance.html#lifecycle-hooks).
 
-Methods called from a template should not have any side effects, such as changing data or triggering asynchronous processes. If you find yourself tempted to do that you should probably use a [lifecycle hook](instance.html#lifecycle-hooks) instead.
 
 ### Debouncing and Throttling
 
-Vue doesn't include built-in support for debouncing or throttling but it can be implemented using libraries such as [Lodash](https://lodash.com/).
+O Vue não inclui suporte integrado para depuração ou limitação, mas pode ser implementado usando bibliotecas como [Lodash](https://lodash.com/).
 
-In cases where a component is only used once, the debouncing can be applied directly within `methods`:
+Nos casos em que um componente é usado apenas uma vez, o debouncing pode ser aplicado diretamente em `methods`:
 
 ```html
 <script src="https://unpkg.com/[email protected]/lodash.min.js"></script>
@@ -101,7 +103,8 @@ In cases where a component is only used once, the debouncing can be applied dire
 </script>
 ```
 
-However, this approach is potentially problematic for components that are reused because they'll all share the same debounced function. To keep the component instances independent from each other, we can add the debounced function in the `created` lifecycle hook:
+No entanto, essa abordagem é potencialmente problemática para componentes que são reutilizados, porque todos eles compartilharão a mesma função depurada. Para manter as instâncias do componente independentes umas das outras, podemos adicionar a função depurada no gancho do ciclo de vida `created`:
+
 
 ```js
 app.component('save-button', {
@@ -110,7 +113,7 @@ app.component('save-button', {
     this.debouncedClick = _.debounce(this.click, 500)
   },
   unmounted() {
-    // Cancel the timer when the component is removed
+    // Cancela o cronômetro quando o componente é removido
     this.debouncedClick.cancel()
   },
   methods: {