Question

我以两种方式使用数据选项。在第一个片段数据对象中包含键值，但在第二个数据中是一个函数。个人是否有任何好处。无法在Vue.js文档中找到相关解释以下是两个代码段：

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

});

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

两者都给了我相同的输出。

Answer 1

在考虑您的特定代码示例时，似乎您的问题的评论错过了一个关键点。

在根Vue实例中（即通过new Vue({ . . . })构建），您可以毫无问题地使用data: { . . . }。问题是当您拥有通过Vue.component(. . .)定义的可重用组件时。在这些情况下，您需要使用data() {return { . . . };}或data: function() {return { . . . };}。

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

有关此问题的详细信息，请查看corresponding section of the Vue.js documentation。

Answer 2

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

因此，启动新的vue实例在数据：{}作为对象或data（）{return {}}或data：function（）{return {}}之间并不重要。

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

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

数据之间有什么区别：＆＃39;和＆＃39;数据（）＆＃39;在Vue.js？

2 个答案: