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

Question

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

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

• .vue 有 3 个独立的东西：只有 1 个 div 、 (logic) 、 (css)

• vue 应该有 data()、methods()、computeproperties() 等

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

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

Answer 1

*.vue文件仅在构建期间存在。Vue 文件可以包含<template />,<script />和<style />标签。Webpack 需要知道如何捆绑*.vue导入。所以我们有vue-loader。在构建期间，使用 vue-loader，Vue 文件中的 JavaScript 被转译，模板被编译以呈现函数，并提取样式。仅 .js 文件无法同时包含所有<template />,<script />和<style />标签。

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