Description
Currently we don't optimize event listeners that reference a local variable, for example in a for-loop:
<template for:each={list} for:item="task">
<button key={task.id} onclick={task.delete}></button>
</template>
This produces:
on: {
click: api_bind(task.delete),
},
Note that there is no caching on the $ctx
object. Whereas there is if the referenced function is scoped to the top level (i.e. the component):
<button onclick={topScopedListener}></button>
on: {
click: _m0 || ($ctx._m0 = api_bind($cmp.topScopedListener)),
},
Note that using this same system for locally-scoped variables is not possible, because it would lead to incorrect behavior – we don't want every task.delete
in an array to be cached onto $ctx._m0
, because this would mean that every event listener would just be the first task
's delete
.
It's possible, though, that we could do a similar caching optimization even for locally-scoped event listeners. This may be possible by using the task
object itself as a WeakMap
key, or by using the key
as a key, or something.
Activity