Data Properties And Methods In Vue

Pranay Chauhan
Last Updated: May 13, 2022

Introduction

Vue is a javascript library that allows the user to create interactive web interfaces. Vue seems to have managed to become the most popular of recent times.

Whenever we work with Vue.js, we should also know the essential terms about it.

Have you ever wondered what is the basic property used in the Vue component? What are the methods involved in it?

The data properties and methods are the basic techniques used in the component.

In this article, we will get into the concept of data properties and methods in Vue.

What are Data Properties?

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. 

Example on Data Properties

For convenience, any top-level properties of that object are also exposed directly via the component instance.

Let us see the demonstration for the same.

const app = Vue.createApp({
 data() {
   return { count: 4 }
 }
})

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
vm.count = 5
console.log(vm.$data.count) // => 5

// ... and vice-versa
vm.$data.count = 6
console.log(vm.count) // => 6


The instance properties are added only when the instance is created first, so we need to ensure that they are all present in the object that is returned by the data function. We can use null, undefined or some other placeholder value for properties when the desired value is not yet available, whenever necessary.

It is also possible to add a new property directly to the instance of the component without even using it in the data. Though this property is not backed by the $data object, it will not automatically be tracked by Vue's reactive system.

Vue uses a '$' as the prefix when exposing its own built-in APIs via the component instance. That will also reserve the prefix '_' for the internal properties. We should also avoid the use of names for the top-level data properties that start with either of $ or _ characters. 

What are Methods?

For adding methods in a component instance we use the methods option. This is an object which contains the desired methods in a component.

Let us see the same in the demonstration below.

const app = Vue.createApp({
 data() {
   return { count: 4 }
 },
 methods: {
   increment() {
     // `this` will refer to the component instance
     this.count++
   }
 }
})

const vm = app.mount('#app')

console.log(vm.count) // => 4

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.

Example on Methods

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:

<button @click="increment">Up vote</button>


In the example above, the method increment will be called when the <button> is clicked.

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 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:

<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.

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 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.

In cases where a component is only used once, the debouncing can be applied directly within methods:

<script src="https://unpkg.com/lodash@4.17.20/lodash.min.js"></script>
<script>
 Vue.createApp({
   methods: {
     // Debouncing with Lodash
     click: _.debounce(function() {
       // ... respond to click ...
     }, 500)
   }
 }).mount('#app')
</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:

app.component('save-button', {
 created() {
   // Debouncing with Lodash
   this.debouncedClick = _.debounce(this.click, 500)
 },
 unmounted() {
   // Cancel the timer when the component is removed
   this.debouncedClick.cancel()
 },
 methods: {
   click() {
     // ... respond to click ...
   }
 },
 template: `
   <button @click="debouncedClick">
     Save
   </button>
 `
})

Frequently Asked Questions (FAQs)

  1. What are data properties?
    The data property value is an anonymous function that is returning the object. Every property inside that object is added to the Vue reactivity system so that if we change that property value then Vue re-renders the dom with the updated data.
     
  2. What are methods?
    Method property is self-defined by their name. They are the properties used to define the methods in a component.

Key Takeaways

We learned about the concept of data properties and methods in Vue. This is an interesting concept of data properties and methods that allows us to easily use components in Vue. We also learned about the implementation of data properties and methods in Vue. We also learned about debouncing and throttling using the data properties and methods.

Apart from this, you can also expand your knowledge by referring to these articles on Javascript and Web development.

For more information about the react framework for frontend development, get into the entire Frontend web development course.

Happy Learning!

 

Was this article helpful ?
0 upvotes

Comments

No comments yet

Be the first to share what you think