在Vue中使用组件声明数据

Question

根据the docs，这就是您在Vue中声明数据的方式：

data: {
    name: 'Vue.js'
}

但是，当我这样做时它不起作用，并且控制台中显示错误：

The "data" option should be a function that returns a per-instance value in component definitions.

我将其更改为以下内容，然后工作正常：

data() {
    return {
        name: 'Vue.js',
    }
}

为什么Vue文档在不起作用时会显示最高代码？我这有什么问题吗？

编辑：只有在使用组件时才会发生这种情况。

Answer 1

在根Vue实例（通过新Vue（{。。。}构造）中，您可以简单地使用数据：{。。。}而不会出现任何问题。

当您计划使用Vue.component（...）或使用“模板”标签重用Vue组件时，请使用data属性作为函数。

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

https://vuejs.org/v2/guide/components.html#data-Must-Be-a-Function

Answer 2

您应该这样做在Vue.js中声明数据

var app = new Vue({
  el: '#app', //This is the container in which Vue will be in. The #app means the id of the container is app
  data: {

  }
});

Answer 3

事实证明，您需要使用与在Vue对象上设置数据时不同的组件声明数据。

  

相反，组件的data选项必须是一个函数，以便每个实例都可以维护返回数据对象的独立副本：

更多：Vue docs