What is difference between 'data:' and 'data()' in Vue.js?

Question

I have used data option in two ways. In first snippet data object contains a key value, however, in second data is a function. Is there any benefits of individuals.Not able to find relevant explanations on Vue.js Docs Here are two code snippets:

new Vue({   el: "#app",   data: {       message: 'hello mr. magoo'     }  });  new Vue({   el: "#app",   data() {     return {       message: 'hello mr. magoo'     }   } }); 

Both are giving me the same output.

Answer 1

It seems as though the comments on your question missed a key point when considering your specific code example.

In a root Vue instance i.e. constructed via new Vue({ ... }), you can simply use data: { ... } without any problems. The issue is when you have reusable components that are defined via Vue.component(...). In these instances, you need to either use data() {return { ... };} or data: function() {return { ... };}.

The reason for this is to ensure that for each individual instance of the reusable child component, there is a unique object containing all of the data being operated on. If, in a child component, you instead use data: { ... }, that same data object will be shared between the child components which can cause some nasty bugs.

Please review the corresponding section of the Vue.js documentation for more information regarding this problem.