确定何时在Vue.js中使用数据结构方法

Question

我现在正在阅读Vue.js v2文档，感觉好像在数据结构方面遇到了冲突。 In official documentation他们使用以下内容创建数据：

var data = { a: 1 }
var vm = new Vue({
  el: '#example',
  data: data
})

但是在观看Vue JS Crash Course 2019上的视频时，演讲者使用以下方法：

  export default {
    name: "app",
    data() {
      return {
        data: data
      }
    }
  }

• 这两种方法是否都对2019年的Vue.js有效？如果是这样，我们什么时候在什么环境下使用它们？

• 还有，为什么在第二个示例中，我不能像第一个示例中那样将其分配给特定的元素ID？

• 文档中有很多关于使用new Vue的话题，但我还没有看到export default教程中使用了这篇文章。能做到吗？为了使用javascript操纵对象？例如：

  new Vue({
    data: {
      a: 1
    },
    created: function () {
      // `this` points to the vm instance
      console.log('a is: ' + this.a)
    }
  })
  // => "a is: 1"
  

感谢您与我一起学习，以便对何时使用这两种方法有一个全面的了解。

Answer 1

1. 您在JavaScript文件中使用new Vue()，在Vue文件中使用export default {…}，扩展名为.vue。构建工具会将Vue文件转换为JavaScript，并将代码转换为Vue组件。
2. 通常使用Vue单个组件文件，但是如果您不想使用构建工具，则可以使用Vue()语法。
3. 在Vue文件中，您正在创建一个组件。如果要进行操作，则应在组件内部进行操作，无需将组件分配给变量。
4. 您可以将new Vue()和Vue文件一起使用，但是我认为最好坚持一种思维方式。我建议使用export default {…}语法的Vue文件。