如果我们拥有.js中的所有详细信息，.vue .js文件之间有什么区别？

Question

我已经阅读了vue文档。 我对vue结构的全局理解基于以下陈述：

• index.html具有指向.vue文件的容器

• .vue具有3个独立的元素：仅使用1 div，（logic），（css）

• vue应该具有data（），methods（），computedproperties（）等

但是.js文件可以与.vue具有相同的代码

那么他们之间有什么区别，或者我错过了什么？

Answer 1

*.vue文件仅在构建时存在。 Vue文件可以包含<template /> ， <script />和<style />标记。 Webpack需要知道如何捆绑*.vue导入。 所以我们有vue-loader 。 在构建期间，使用vue-loader，将对Vue文件中的JavaScript进行编译，将模板编译为呈现函数，然后提取样式。 只是.js文件将无法一起包含所有<template /> ， <script />和<style />标记。

我个人更喜欢将*.vue文件与所有这些标签一起使用，因为这迫使我保持​​组件的小巧和专注。 如果*.vue文件太长，则通常表明我的组件做得太多，我将其分解为较小的组件。 而且，一个集中的小型组件及其所有逻辑，模板和样式都在一个文件中，使用起来非常方便。 现在和将来。

Answer 2

使用.vue文件可让您将模板，js和css包含在同一文件中。

如果要预编译模板，它们还可以提供更好的性能，并且可以使用作用域的CSS。