vuejs2 - 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-模板/webpack-simple

Answer 1

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

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

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

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

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

---

关于纯模块的说明

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

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

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