Vue.js中“ data:”和“ data()”之间的区别是什么?

JavaScript

蛋蛋L西里

2020-03-12

我以两种方式使用了数据选项。在第一段数据对象中包含一个键值,但是在第二段数据中则是一个函数。个人有什么好处。无法在Vue.js文档中找到相关说明。这是两个代码段:

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

});

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

两者都给我相同的输出。

第1136篇《Vue.js中“ data:”和“ data()”之间的区别是什么?》来自Winter(https://github.com/aiyld/aiyld.github.io)的站点

1个回答
Harry路易 2020.03.12

在考虑您的特定代码示例时,似乎您对问题的评论缺少关键点。

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

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

请查看Vue.js文档相应部分,以获取有关此问题的更多信息。

问题类别

JavaScript Ckeditor Python Webpack TypeScript Vue.js React.js ExpressJS KoaJS CSS Node.js HTML Django 单元测试 PHP Asp.net jQuery Bootstrap IOS Android