Vue JS: Difference of data() { return {} } vs data:() => ({ })

Asked
Active3 hr before
Viewed126 times

4 Answers

return
90%

I'm curious both of this data function, is there any difference between this two.,Change the arrow function to, either (ES6/EcmaScript 2015 notation):, How do the Ausgleichsmandate in Germany's Bundestag election work? , Is there a Mandarin counterpart for the Cantonese slang 做媒?

So if you ever have something like:

export default {
   props: ['stuffProp'],
   data: () => ({
      myData: 'someData',
      myStuff: this.stuffProp
   })
}

Change the arrow function to, either (ES6/EcmaScript 2015 notation):

export default {
   props: ['stuffProp'],
   data() { // <== changed this line
      return {
         myData: 'someData',
         myStuff: this.stuffProp
      }
   }
}

Or to (regular, ES5 and before, notation):

export default {
   props: ['stuffProp'],
   data: function() { // <== changed this line
      return {
         myData: 'someData',
         myStuff: this.stuffProp
      }
   }
}
load more v
88%

Vue comes with two different ways of storing variables, props and data.,So what's the difference between props and data?,The real magic of using Vue happens when you start using props and data together.,Let's define some props and data on a component:

In Vue we add props to components in the <template> section of our code:

<template>
   <my-component cool-prop="hello world"></my-component>
</template>
load more v
72%

Here’s an example of a Vue component:, Single File Components , Components Basics ,Components are reusable Vue instances with a name: in this case, <button-counter>. We can use this component as a custom element inside a root Vue instance created with new Vue:

Here’s an example of a Vue component:

// Define a new component called button-counter
Vue.component('button-counter', {
  data: function () {
    return {
      count: 0
    }
  },
  template: '<button v-on:click="count++">You clicked me {{ count }} times.</button>'
})
load more v
65%

Note that if you use an arrow function with the data property, this won't be the component's instance, but you can still access the instance as the function's first argument:,After the instance is created, the original data object can be accessed as vm.$data. The component instance also proxies all the properties found on the data object, so vm.a will be equivalent to vm.$data.a.,The function that returns a data object for the component instance. In data, we don't recommend to observe objects with their own stateful behavior like browser API objects and prototype properties. A good idea would be to have here just a plain object that represents component data.,Note that if you use an arrow function with a computed property, this won't be the component's instance, but you can still access the instance as the function's first argument:

// direct instance creation
const data = {
   a: 1
}

// The object is added to a component instance
const vm = createApp({
   data() {
      return data
   }
}).mount('#app')

console.log(vm.a) // => 1
load more v

Other "return-undefined" queries related to "Vue JS: Difference of data() { return {} } vs data:() => ({ })"