Angular中绑定值为0的keyup事件时，为何模板本地变量会更新？

给定的测试模板代码为：

<input #myInput (keyup)="0">
<p>{{myInput.value}}</p>

开发观察到的现象：keyup事件绑定的处理表达式是无实际业务逻辑的常量0，但模板中{{myInput.value}}的插值内容，依然会随用户在输入框的输入实时同步更新。

这个现象本质是Angular默认的变更检测触发机制导致的，和事件绑定的处理表达式内容没有任何关系。
很多开发者误以为(keyup)="0"是空操作所以不会触发更新，实际上这条绑定的作用是把Angular的事件监听能力挂载到了input元素上，为后续的自动变更检测提供了触发入口。

• 模板编译阶段：Angular编译这条(keyup)="0"绑定的时候，不会因为表达式是常量就跳过相关逻辑，而是会基于Zone.js的事件代理机制，在对应DOM元素上注册可被Angular上下文捕获的keyup事件监听。执行事件回调时就是简单返回一个0，没有任何实际副作用，但注册监听的动作已经完成。
• 事件触发阶段：用户在输入框按下按键时，keyup事件会被Zone.js捕获，Zone.js会自动通知Angular的变更检测调度器，启动一次从根组件开始、覆盖整棵组件树的变更检测流程——这个触发逻辑不关心事件绑定的回调到底做了什么，只要事件是在Angular的拦截范围内，就会触发检测。
• 视图更新阶段：变更检测遍历到<p>标签时，会重新求值{{myInput.value}}这个插值表达式。因为myInput是直接指向input DOM元素的模板引用变量，每次求值都会拿到元素当前最新的value属性值，自然就会把用户刚刚输入的内容更新到页面上。

补充对比参考：如果把<input>上的(keyup)="0"绑定完全删掉，Angular就不会在这个元素上注册被Zone.js拦截的事件监听，用户输入时就不会主动触发变更检测，{{myInput.value}}的内容只会在其他能触发变更检测的时机（比如页面初始化、其他组件事件触发的更新）才会刷新，不会跟着输入实时变化。

内容的提问来源于stack exchange，提问作者vitorfigm