编写Vue.js组件前需要知道的7件事
极客时间编辑部
讲述：子阳大小：2.08M时长：04:32
日前，技术爱好者伊迪森·阿贝拉德（Edithson Abelard）介绍了编写 Vue.js 组件前需要知道的几件事，具体如下。
1. 组件可以全局或局部加载
全局加载的组件可以从应用程序中的任何模板（包括子组件）访问。它限制了将全局组件导入子组件的次数。加载全局组件要谨慎，它会使你的应用程序膨胀，即使不使用，它仍然会包含在你的 Webpack 构建中。
局部加载组件使你能够隔离组件，并且只在必要时加载它们。当与 Webpack 结合使用时，你可以只在使用组件时延迟加载它们。这使你的应用程序初始文件较小，并减少了初始加载时间。
2. 延迟加载 / 异步组件
使用 Webpack 的动态导入来延迟加载组件。Vue 支持在渲染时延迟加载组件和代码分割。这些优化让你可以只在需要时加载组件代码，从而减少 HTTP 请求、文件大小，并自动提高性能。这个特性的重要之处在于，它既可以处理全局加载的组件，也可以处理局部加载的组件。
3. 必需的 Props
有很多方法可以为组件创建 props，你可以传递一个表示 prop 名称的字符串数组，也可以传递一个以键作为 prop 名称的对象和一个配置对象。
基于对象的方法，你可以为单个 prop 创建一些键配置更改，其中之一就是必需的键。必需的键需要一个 true 或 false 值。当组件被使用时，如果 prop 没有设置，true 就会抛出一个错误，false（默认值）就不必需或者抛出一个错误。在和其他开发人员共享组件以及提醒你自己某个 prop 对该组件至关重要时，这是很好的做法。
4. 将组件分解为逻辑块
你如何定义要将组件分解成什么样的逻辑块？分解组件的第一种方法是基于数据变化率。如果数据在组件的某个部分始终在变化，而在其他部分没有变化，那么它可能应该自成组件。
这样做的原因是，如果你的数据 /HTML 在模板的一个部分中不断变化，那么整个模板都需要检查和更新。但是，如果将相同的 HTML 放入它自己的组件中，并使用 props 传递数据，那么当它的 props 发生更改时，只有那个组件才会更新。
另一种从逻辑上分解组件的方法是重用。如果你的 HTML、图形或功能在整个应用程序中始终如一地使用，那么它们就是可以隔离到一个可重用的新组件中的很好的候选项。可重用组件具有易于维护的潜在好处，因为你可以更改一个组件，而不必在代码库中查找替换和更改多个地方。
5. 验证 Props
使用对象表示法来配置每个 prop，而不是使用字符串数组来定义 prop。两种非常有用的配置样式是“type”和 validator。
使用类型参数，Vue 将对你的 prop 值进行自动类型检查。对于更复杂的验证，我们可以将函数传递给 validator 属性，该属性以该值作为参数并返回 true 或 false。这非常强大，因为它允许我们针对传递给该特定属性的值编写自定义验证。
6. 多 Props 绑定和覆盖
如果组件有许多 props，那么不断地为每个 prop 设置绑定可能会变得单调乏味。有一种快速的方法可以设置组件上所有属性的绑定，那就是使用 v-bind 绑定对象，而不是单个属性。
7. 在组件中修改 Props
在某些情况下，你可能希望修改从某个 prop 传入的值。然而，这样做你会收到一个警告“避免直接改变一个 prop”，相反，使用 prop 值作为局部数据属性的默认值。这样做将使你能够看到原始值，而修改局部数据不会改变 prop 值。
这是有代价的。使用此方法，你的局部数据属性不会对 prop 值作出反应，因此来自父组件的任何对 prop 值的更改都不会更新你的局部值。但如果确实需要这些更新，则可以使用 computed 属性来组合值。
公开
同步至部落
取消
完成
0/2000
荧光笔
直线
曲线笔记
复制
AI
- 深入了解
- 翻译
- 解释
- 总结
该免费文章来自《极客视点》，如需阅读全部文章，
请先领取课程
请先领取课程
免费领取
© 版权归极客邦科技所有，未经许可不得传播售卖。 页面已增加防盗追踪，如有侵权极客邦将依法追究其法律责任。
登录 后留言
全部留言(2)
- 最新
- 精选
NNNNzs7、习惯于对prop用sync方法，子组件通知父组件更新数据2
王第七条 还可以watch 变化的props后 手动修改数据属性.也可以通过method来响应props变化
收起评论