[Vuejs]-Vue js application object syntax

by

3👍

✅

It’s a short way writing for methods declaration inside object introduced in ES6

 data() {
    return {
      counter: 0
    }
  },

is equals to

data: function() {
  return {
    counter: 0
  }
}
👤Satyam Pathak

1👍

this syntax called Enhanced Object Literals it is a new feature from the new features in ES6 or they called it to ECMA Script 2015

and in the old syntax, you could write it like this

const CounterApp = {
  data: function() {
    return {
      counter: 0
    }
  },
  mounted: function() {
    setInterval(() => {
      this.counter++
    }, 1000)
  }
}
Vue.createApp(Counter).mount('#counter')

you can read more about Enhanced Object Literals here.
this article is fine to check the new features of ES6

👤Joseph

Leave a comment