Replies: 1 comment 1 reply
-
|
官方不建议多重嵌套。它本质上是一种“偷懒”的写法：一旦放开，大家会习惯性地层层嵌套，最终形成难以维护的屎山代码。 你这个例子只是双重嵌套，问题不大。但三层以上、尤其内层直接引用外层变量时，阅读和调试会非常痛苦。我吃过这亏，所以在 ofa.js 中做了限制：要么只允许一层嵌套，要么允许多层但禁止跨层访问变量。 推荐的做法是：把需要深度嵌套的部分拆成组件，比如： <l-m src="./t-comp.html"></l-m>
<div style="width: 100vw; height: 100vh">
<div>
<x-fill :value="line">
<span> {{$data.name}} </span>
</x-fill>
</div>
<x-fill :value="list">
<t-comp :item="$data" :line="$host.line"></t-comp>
<!-- <div>
<x-fill
:value="$host.line.map((l) => {return {...l, parent:$data}})"
name="sub"
></x-fill>
</div> -->
</x-fill>
</div>
<!-- <template name="sub">
<span> {{$data.parent[$data.key]}} </span>
</template> --><!-- t-comp.html -->
<template component>
<style>
:host {
display: block;
border: 1px solid blue;
}
</style>
<x-fill :value="line" name="sub"></x-fill>
<div style="color: red; padding: 8px">{{item}}</div>
<template name="sub">
<span> {{$data}} - {{$host.line}} </span>
</template>
<script>
export default async () => {
return {
tag: "t-comp",
data: {
line: [],
item: {},
},
};
};
</script>
</template>这种设计强制通过组件化来管理复杂度，而不是堆嵌套。长远看，代码更干净、更好维护。（PS: 我以前在多家互联网公司工作过，在各种各样的框架和小程序上使用过多重嵌套，深深的被这类代码所困扰过，深知多重嵌套容易导致代码混乱——就像早期 JS 的回调地狱一样。） |
Beta Was this translation helpful? Give feedback.
1 reply
-
|
原来如此，受教了，还是组件化没养成习惯 |
Beta Was this translation helpful? Give feedback.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Uh oh!
There was an error while loading. Please reload this page.
-
目前似乎只能在给定value时map塞进去，也许未来可以设计更方便的方法访问上层循环的data和index等？
Beta Was this translation helpful? Give feedback.
All reactions