Vue.js 中的 'data:' 和 'data()' 有什么区别？答案

【问题标题】：What is difference between 'data:' and 'data()' in Vue.js?Vue.js 中的 'data:' 和 'data()' 有什么区别？
【发布时间】：2018-06-18 23:16:07
【问题描述】：

我以两种方式使用数据选项。在第一个 sn-p 数据对象中包含一个键值，然而，在第二个数据中是一个函数。个人有什么好处。在Vue.js Docs上找不到相关解释这里有两个代码sn-ps：

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

});

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

两者都给我相同的输出。

【问题讨论】：

vuejs.org/v2/api/#Options-Data 第5段详细内容就是你要找的。span>
so ,data() { return { message: 'hello' } 和 data: function() { return { message: 'hello' } 都一样吗？
是的，data(){} 是 ES6，data:function 是 ES5 方式的代码。
谢谢伙计。 Bdw 我在哪里可以找到关于 ES6 和 ES5 规范的详细说明？如果你能提供的话就太好了。
developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/…

标签： javascript vue.js vuejs2

【解决方案1】：

在考虑您的具体代码示例时，您问题上的 cmets 似乎错过了一个关键点。

在根 Vue 实例中，即通过new Vue({ ... }) 构造，您可以简单地使用data: { ... } 而不会出现任何问题。问题是当您拥有通过Vue.component(...) 定义的可重用组件时。在这些情况下，您需要使用data() {return { ... };} 或data: function() {return { ... };}。

这样做的原因是为了确保对于可重用子组件的每个单独实例，都有一个包含所有正在操作的数据的唯一对象。如果在子组件中使用data: { ... }，则相同的数据对象将在子组件之间共享，这可能会导致一些讨厌的错误。

请查看corresponding section of the Vue.js documentation，了解有关此问题的更多信息。

【讨论】：

【解决方案2】：

[Vue 警告]：“数据”选项应该是一个在组件定义中返回每个实例值的函数。

所以在 data:{} 作为对象或 data(){return{}} 或 data:function(){return{}} 之间启动一个新的 vue 实例并不重要。

组件很重要，让我们尝试一个例子：

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
    </div>
    <script>
         Vue.component('counter', {
             template: '<button v-on:click="counter += 1">{{ counter }}</button>',
             data: {
                 counter:0
             }
         });
    </script>

输出：

[Vue warn]: The "data" option should be a function that returns a per-instance value in component definitions.

现在让我们在 vue 对象中观看：

<body>
    <div id="app">
        <button v-on:click="counter += 1">{{ counter }}</button>
        <button v-on:click="counter += 1">{{ counter }}</button>
    </div>
    <script>

        new Vue({
            el: '#app',
            /*data() {
                return {
                    counter:0
                }
            },*/
            //or (output same)
            /*data: function () {
                return {
                    counter: 0
                }
            }*/
            //or (output same)
            data:{
                counter:0
            }

        });
    </script>

</body>

//现在让我们尝试将数据作为组件中的一个函数，以一遍又一遍地重用同一个组件。

<body>
    <div id="app">
        <counter></counter>
        <counter></counter>
        <counter></counter>
    </div>
    <script>

        Vue.component('counter', {
            template: '<button v-on:click="counter += 1">{{ counter }}</button>',
            data: function () {
                return {
                    counter: 0
                }
            }
        })

        new Vue({
            el: '#app'
        });
    </script>

</body>

【讨论】：