Vue 实例渲染约定

Question

在 Vue 模板示例中，一个常见的约定是将一个 main.js 文件作为 Vue 实例，然后渲染一个导入的 App.vue 组件。为什么要这样做？我可以想到两个原因，但我想知道是否有“官方”原因。

1. Vue 实例和 Vue 组件 API 略有不同（例如，data 格式）。这种方法将最大限度地减少编写在 Vue 实例中的代码。

2. 如果使用vue-loader，您可以将<template />、<script /> 和<style /> 标签组合到App.vue 组件中（本来是main.js）。

还有其他原因吗？

参考：

vuejs-templates/webpack-simple

Answer 1

每个文件都应该有单独的责任

拆分性质不同的任务通常是个好主意 - 我们有两种情况：

• 声明和导出组件
• 导入和渲染

正如我们所见，这些是完全不同的，因此不应该在一个地方完成。您还应该问“我为什么不这样做”与“我为什么要这样做”并行；看起来这种约定是人为的（仅基于小示例），但在具有中到大型代码库的项目中，它有助于可维护性。

那么，考虑到微尺度的时间成本和打破常规，你有什么理由不这样做？

---

关于纯模块的说明

从副作用的角度分析案例，我们有：

• 声明和导出组件，不影响其他模块
• 渲染导入的组件，因此引入副作用

我们可以看到，第一个模块是纯的，而第二个不是。
将确实引入副作用的操作保留在一个地方通常是个好主意。