javascript - 自定义属性附加事件太早了？

Question

自定义组件
我已经为我的应用程序的导航创建了一个自定义组件。它由一个 ul 元素组成，其所有 li 元素都是根据路由器导航列表中的项目动态创建的。这是在组件的附加事件中发生的。这里没有什么特别的事情发生。

自定义属性
但因为我想要一个好看的花哨菜单，所以我还创建了一个自定义属性并将其实现到自定义组件的根 ul 元素中。在自定义属性的 attached 事件中，我想做一些 dom 操作，以便我的菜单看起来像那些酷 child 创建的菜单。

问题
尽管自定义属性的 attached 事件在自定义组件的 attached 事件之后触发，但动态创建的 li 项并不属于dom 中的自定义属性的 attached 事件还没有。

问题
我的假设是，在 attached 事件中，实际组件的 view 附加到 dom，并且之前的所有组件也附加到 dom。当我完成 attached 事件时，这里动态创建的 html 也会被附加。我是不是搞错了？

附注
我知道使用 TaskQueue 可以解决我的问题。但是，我想首先知道是否有不同的方法/解决方案，因为我相信及时移动事物可能会导致一系列悖论，让您陷入维护噩梦。

Answer 1

请允许我消除您对任务队列的误解。

您及时移动事物导致维护问题的想法肯定适用于使用setTimeout()，因为这会导致实际的延迟，并强制执行到下一个事件循环。 queueTask() 或多或少是相同的东西(它在内部使用 setTimeout())。

但是，TaskQueue 的 queueMicroTask() 方法的工作方式非常不同。

当您调用 queueMicroTask() 时，与 queueTask() 和 setTimeout() 不同，任务被安排为立即在同一事件循环上执行。这是一个非常健壮的机制，具有有保证的执行顺序，在进行任何 DOM 操作之前，在 attached() 中使用它通常被认为是良好的做法。

事实上，queueMicroTask() 由 Aurelia 在内部的多个地方使用(主要在 绑定(bind) 和 模板资源 中)。两个值得注意的地方是:

• 属性和集合观察者使用它来“延迟”通知订阅者，直到所有其他绑定(bind)完成其内部更新工作
• repeat 属性使用它来设置 ignoreMutations 标志(并在队列刷新后取消设置)，以防止在更新其内部集合时无限递归

您通常可以认为bind() 和attached() Hook 有两个“阶段”:非排队阶段和排队阶段。排队阶段是组件执行依赖于整个组件图首先通过其他(通常是递归)进程完成的工作的阶段。

queueMicroTask() 不延迟执行，只是将其推到调用堆栈的末尾

它的功能相当于将函数作为回调传递到调用堆栈的末尾，但可以省去您编写定位最后一个调用并将其全部连接起来所需的意大利面条代码的麻烦。 super 干净。

all its li elements are dynamically created based on the items in the router's navigation list. This is happening in the attached event of the component

看，每当您在 attached() 期间创建任何内容时，您都不能依赖在另一个组件的 attached() 期间创建的内容，因为这取决于顺序的编译/组合。那是内部问题。对于自定义属性来说尤其如此。自定义属性(尤其是样式库中的属性)到处使用 TaskQueue，因为这是它们可以依赖 DOM 完成的唯一方式。

在这里使用queueMicroTask()将保证两件事:

• 当 aurelia 完全完成附加和渲染的“第一遍”时执行
• 当 aurelia 完成后，它会立即执行 - 甚至没有延迟一微秒。

解决这个问题的最佳(也许也是唯一正确的)方法确实是使用任务队列 - 我保证:)