孤独的孩子：我应该将控制流指令写入通用结构组件吗？

作者：MichaelThiessen译者：前端小智来源：在medium点赞，再看一遍，微信搜索【伟大的走向世界】关注这个没有大厂背景，但有向上和积极的态度。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。大家都说简历里没项目可写，所以给大家找了一个项目，还给了一个【搭建教程】。控制流指令，例如v-if和v-for，有可能创建难以在大型项目中阅读的嵌套代码。如果v-for嵌套在v-if中，这个特性就更加明显了。为了程序员的头发着想，希望大家不要写出多层嵌套的代码。但如果这就是您要做的，这里有一个技巧可以轻松将这些噩梦变成童话故事。一个孤独的子组件如果我想在嵌套开始增长时保持整洁，我的默认设置是将代码提取到一个新组件中。使用v-for和v-if我们将指令中的所有内容都变成它自己的组件。例如，让我们从这个嵌套模板开始接下来，我们将v-for中的内容提取到一个新的组件中：如果我们导入这个新组件，我们会看到它很好地摆脱了所有嵌套：本例中嵌套不多，所以针对一小部分内容做一个组件有点繁琐。但是，如果我们有两层、三层或更多层的嵌套，这种技术可以消除嵌套结构，使代码更容易理解。但是这里有一个问题：为什么我们不把v-for指令也写到新组件中呢？我们应该将控制流指令放入新组件中吗？假设我们上面的v-for放在一个新的组件中，我们会得到如下结构：看起来像这样up，父组件确实清晰多了。但不幸的是，这种重定向将复杂性置于子组件中：哪种方式更好？如果你的最终目标是减少巢的数量，那么这个选择肯定是更糟糕的。我们在子组件中添加了额外的嵌套级别，而没有减少父组件中的嵌套级别。通常，我会避免将控制流指令（如v-if和v-for）放在此类组件的根部，因为它会影响可重用性。如果您只需要一个简单的ListItem怎么办？假设v-if，如果你想在不同逻辑的组件之间切换，或者你想使用一个完全不同的组件怎么办？将控制流指令写入具有最小公共结构的组件限制了我们的灵活性，而没有给我们带来更多便利。因此，我倾向于将控制流指令留在此类小部件之外。我也尽量避免将它们放在组件的根部。一旦您深入了解“引擎盖下”发生的事情，这个问题及其解决方案就会变得更加有利。https://www.digitalocean.com/...作者：MichaelThiessen译者：前端小智来源：Medium喜欢再看，微信搜索【大千世界】关注这个没有大厂背景，但是它有上升趋势积极的人。本文已收录到GitHubhttps://github.com/qq44924588...，文章已分类，也整理了很多我的文档和教程资料。控制流指令，例如v-if和v-for，有可能创建难以在大型项目中阅读的嵌套代码。如果v-for嵌套在v-if中，这个特性就更加明显了。为了程序员的头发着想，希望大家不要写出多层嵌套的代码。但如果这就是您要做的，这里有一个技巧可以轻松将这些噩梦变成童话故事。一个孤独的子组件如果我想在嵌套开始增长时保持整洁，我的默认设置是将代码提取到一个新组件中。使用v-for和v-if我们将指令中的所有内容都变成它自己的组件。例如，让我们从这个嵌套模板开始接下来，我们将v-for中的内容提取到一个新的组件中：如果我们导入这个新组件，我们会看到它很好地摆脱了所有嵌套：本例中嵌套不多，所以针对一小部分内容做一个组件有点繁琐。但是，如果我们有两层、三层或更多层的嵌套，这种技术可以消除嵌套结构，使代码更容易理解。但是这里有一个问题：为什么我们不把v-for指令也写到新组件中呢？我们应该将控制流指令放入新组件中吗？假设我们上面的v-for放在一个新的组件中，我们会得到如下结构：看起来像这样up，父组件确实清晰多了。但不幸的是，这种重定向将复杂性置于子组件中：哪种方式更好？如果你的最终目标是减少巢的数量，那么这个选择肯定是更糟糕的。我们在子组件中添加了额外的嵌套级别，而没有减少父组件中的嵌套级别。通常，我会避免将控制流指令（如v-if和v-for）放在此类组件的根部，因为它会影响可重用性。如果您只需要一个简单的ListItem怎么办？假设v-if，如果你想在不同逻辑的组件之间切换，或者你想使用一个完全不同的组件怎么办？将控制流指令写入具有最小公共结构的组件限制了我们的灵活性，而没有给我们带来更多便利。因此，我倾向于将控制流指令留在此类小部件之外。我也尽量避免将它们放在组件的根部。一旦您深入了解“引擎盖下”发生的事情，这个问题及其解决方案就会变得更加有利。代码部署后可能存在的bug，无法实时获知。事后为了解决这些bug，花费了大量的时间在日志调试上。顺便推荐一个好用的bug监控工具Fundebug。原文：https://www.digitalocean.com/...每周更新交流文章。可以微信搜索【大千世界】第一时间阅读，回复【福利】还有很多前端视频等着你。本文在GitHub上https://github.com/qq449245884/xiaozhi已收录，欢迎Star。