logo标签列表

" data: " 和 " data() " 在 Vue.js 中有什么区别？

javascriptvue.jsvuejs2
44

我已经使用了data选项两种方式。在第一个代码片段中，数据对象包含一个键值，然而在第二个代码段中，数据是一个函数。是否有任何好处？在Vue.js文档中无法找到相关的解释。

以下是两个代码片段：

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

});

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

两者给出的输出结果相同。

9
这段详细内容的第5段是您要找的。 - Onur Özkan
1
那么，data() { return { message: 'hello' } 和 data: function() { return { message: 'hello ' } 两者是相同的吗？ - Vivek
5
是的，data(){}是ES6语法，而data: function则是同一段代码的ES5写法。 - Onur Özkan
谢谢，伙计。顺便问一下，在哪里可以找到关于ES6和ES5规范的详细说明？如果你能提供一些资料就太好了。 - Vivek
2
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Method_definitions - Caramiriel
2个回答
49

在考虑您的具体代码示例时，评论中好像错过了一个关键点。

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

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

有关此问题的更多信息，请参阅Vue.js文档的相关部分。

0

[Vue 警告]: 在组件定义中，"data" 选项应该是一个返回每个实例的值的函数。

因此，在初始化新的 Vue 实例时，无论将 data:{} 作为对象、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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接