共计 2755 个字符，预计需要花费 7 分钟才能阅读完成。
1. 组件可以在全局或本地加载
Vue.js 提供了两种加载组件的方法：一种在 Vue 实例全局，另一种在组件级别。两种方法都有其自身的优点。
全局加载组件使其可以从应用程序中的任何模板（包括子组件）访问。它减少了将全局组件导入子组件的次数。
此外，如果全局加载组件，将无法获得 Vue 注册组件错误 –“did you register the component correctly?”。注意，谨慎加载全局组件。它会使您的应用程序膨胀，即使它未被使用，它仍将包含在 Webpack 构建的初始 bundle 中。
在本地加载组件使您能够隔离组件并仅在必要时加载它们。与 Webpack 结合使用时，只有在使用组件时才去延迟加载组件。这使您的初始应用程序文件大小更小，并减少了初始加载时间。
2. 延迟加载 / 异步组件
使用 Webpack 的动态导入延迟加载组件。Vue 支持在渲染时和代码拆分时延迟加载组件。这些优化允许您的组件代码仅在需要时加载，从而减少您的 HTTP 请求，文件大小，并自动为您提供性能提升。关于此功能的重要部分是它适用于全局加载和本地加载的组件。
全局加载异步组件：
本地加载异步组件：
3. 必须的属性
有很多方法可以为组件创建 props。您可以传递表示 prop 名称的字符串数组，也可以传入一个带有键作为 prop 名称和配置对象的对象。
使用基于对象的方法允许您为单个 prop 修改一些配置，比如设置是否 required。required 的值是 true 或 false。如果在使用组件时未设置 prop，true 将抛出错误，false（默认值）表示不是必须的，不抛出错误。
在共享组件给他人或自己使用时，准确使用 required 配置是很好的，表明这个 prop 很重要。
4. 使用 $emit 触发自定义事件
子组件和父组件之间的通信可以通过使用组件内置函数 $emit 发出自定义事件来完成。
$ emit 函数接收 事件名称的字符串 和 可选的值两个参数。要监听事件，只需将“@eventName”添加到发出事件的组件中（即子组件使用的地方），然后传入事件处理方法。这是保持单一数据流，并使数据从子组件流向父组件的好方法。
5. 从逻辑上分解组件
说起来容易做起来难，如何根据一个逻辑来划分一个组件？
分解组件的第一种方法是基于数据变化。如果数据在组件的一个部分中不断变化，而在其他部分中不变，那么变化的组件那部分应该单独抽取出来作为独立组件。
原因是如果您的数据 /HTML 在模板的一个部分中不断变化，则需要检查和更新整个组件。但是，如果将变化的 HTML 放入其自己的组件中，并使用 props 传入数据，则只有该组件在其 props 更改时才会更新。
从逻辑上分解组件的另一种方法是可重用性。如果您拥有在整个应用程序中重复使用的 HTML，图形或功能，如按钮，复选框，徽标动画，号召性用语或具有简单更改文本的图形 – 这将是一个很好的候选，抽取到一个新的组件，可以被重用。可重用组件具有易于维护的隐藏优势，因为您只需要更改一个组件，而不必在代码库中找到替换和更改多个地方。
6. 验证您的 props
不使用字符串数组来定义 props，而是使用允许配置每个 prop 的对象。两种非常有用的配置项目是“类型”和验证器。
使用类型参数，Vue 将自动键入检查您的 prop 值。例如，如果我们期望一个 Number prop 但收到一个 String，你会在控制台中收到类似这样的警告：
[Vue warn]: Invalid prop: type check failed for prop“count”. Expected Number
对于更复杂的验证，我们可以将函数传递给 validator 属性，该属性接收 prop 值 作为参数并返回 true 或 false。这非常强大，因为它允许我们针对传递给该特定属性的值编写自定义验证。
7. 多个 props 绑定和覆盖
如果你的组件有多个 props，比如说 5，6，7 或更多，那么连续设置每个 prop 的绑定可能会变得很繁琐。幸运的是，有一种快速方法可以为组件上的所有属性设置绑定，这就是通过使用 v -bind 绑定对象而不是单个属性。
使用对象绑定的另一个好处是可以覆盖对象的任何绑定。
在我们的例子中，如果我们在 person 对象中将 isActive 设置为 false，那么我们可以对实际 person 组件执行另一个绑定，并将 isActive 设置为 true 而不覆盖原始对象。
8. 修改组件中的 props
在某些情况下，您可能希望修改从 prop 传入的值。但是，这样做会给你一个警告“Avoid mutating a prop directly”，不让直接修改属性。而是使用 prop 值作为本地数据属性的默认值。这样做将使您能够查看原始值，但修改本地数据不会更改 prop 值。
有一个好处。使用此方法，您的本地数据属性不会对 prop 值产生影响，因此对父组件的 prop 值的任何更改都不会更新您的本地值。但是，如果您确实需要这些更新，则可以使用计算属性组合值。
9. 测试工具中 Mount vs Shallow Mount
在 Vue 测试工具中有两种方法可以创建和启动组件。一个是 mount，另一个是 shallow mount。两者都有自己的优点和缺点。
当您想要在组件及其子组件之间进行相互依赖的测试时，mout 技术非常有效。允许您测试父组件是否按预期正确地与其子组件交互。相反，正如其名称所暗示的那样，shallow mount 技术实例化并仅渲染父组件，而完全隔离而忽略其任何子组件。也就是说，mount 会渲染所有父子组件，shallow mount 仅仅渲染父组件。因为有时候只需要测试父组件的一些特性。
那么哪种方法更好？随你（由你决定。您选择的策略应取决于您可衡量的目标。试图通过完全隔离来自行测试组件，shallow mount 方法效果很好。需要处理具有要确保通信的子组件的组件，那就使用 mount。一个很好的选择是同时使用它们。不局限于一个混合搭配，以满足您的测试需求。
10. Vue CLI 的力量
Vue CLI 是一个功能强大的命令行界面，允许开发人员快速利用大量可以加快工作流程的功能。
一个我使用很多的功能是，运行 vue serve，后边跟上一个 Vue 组件的路径。这样做的好处在于，您可以完全开发一个独立的组件，同时也可以对组件进行热重新加载和迭代，无需临时将新组件导入页面进行开发。
在团队工作时，您可能需要提取一个特定组件并与其他组人共享。这就引出了 Vue CLI 的下一个功能：将 Vue 组件导出为库的能力。调用时，Vue 将自动构建单个文件组件，将 CSS 移动到外部 CSS 文件（可选，您也可以内联），以及创建 UMD 和 Common .js 文件以导入到其他 JS 项目中。
相关文章：
Vue.js 应用性能优化一
Vue.js 应用性能优化二
Vue.js 应用性能优化三
如何使用 Vue.js 渲染 JSON 中定义的动态组件
