Yew绑定window resize事件闭包参数类型不匹配与生命周期问题

两个报错的核心原因：

1. E0631类型不匹配：gloo_events的EventListener要求回调函数接收事件的引用&Event，而非事件的所有权实例Event，这个修改方向是对的。
2. 生命周期报错E0521：闭包直接借用了rendered方法传入的ctx引用，这个引用的生命周期仅覆盖rendered方法的执行周期，方法返回后引用就失效，但EventListener要求绑定的回调是'static生命周期，短生命周期引用被长生命周期闭包捕获就会触发借用错误。

对应疑问解答 #

• 不存在给rendered入参的ctx: &Context<Self>设置'static生命周期的方法。该引用是Yew运行时在调用生命周期方法时临时传入的，生命周期和当前方法调用栈绑定，方法返回就失效，强行标注生命周期只会违反Rust借用规则，无法编译通过。
• ctx.link()是Yew官方设计的组件内部消息传递标准入口，本身就是最优实现，之前的报错是捕获link的方式错误，和link本身无关。
• 不能直接调用self.update(Msg::Resize)。update是Yew运行时调度的生命周期方法，在外部闭包中持有self的可变引用本身就会和Yew的组件状态借用规则冲突，且self的生命周期同样和组件渲染周期绑定，闭包捕获self引用一样会报生命周期错误。
• 不需要将ctx.link()以self.link形式存储在组件结构体中。ComponentLink自带to_owned()方法，可以直接获取拥有独立所有权、'static生命周期的link实例，可安全移动到闭包中使用，额外存储属于冗余操作。
• 正确的resize事件绑定实现需要满足两个核心要求：一是通过to_owned()获取可安全移动的link实例，用move闭包捕获；二是将EventListener返回的监听器实例存储在组件结构体字段中，否则监听器离开rendered作用域会被立即drop，事件监听直接失效。

可运行的正确实现代码 #

use gloo_events::EventListener;
use yew::prelude::*;
use web_sys::window;

pub struct CanvasQuestion {
    // 存储监听器实例，组件drop时自动解绑事件，避免内存泄漏
    _resize_listener: Option<EventListener>,
}
pub enum Msg { Resize }

impl Component for CanvasQuestion {
    type Message = Msg;
    type Properties = ();

    fn create(_ctx: &Context<Self>) -> Self {
        Self {
            _resize_listener: None,
        }
    }

    fn view(&self, _ctx: &Context<Self>) -> Html {
        html! { <canvas id="canvas"/> }
    }

    fn rendered(&mut self, ctx: &Context<Self>, first_render: bool) {
        if first_render {
            // 获取'static生命周期的自有link实例
            let link = ctx.link().to_owned();
            let on_window_resize = move |_event: &Event| {
                link.send_message(Msg::Resize);
            };

            let listener = EventListener::new(
                &window().unwrap(),
                "resize",
                on_window_resize
            );
            self._resize_listener = Some(listener);
            
            // 首次渲染主动触发一次resize逻辑
            ctx.link().send_message(Msg::Resize);
        }
    }

    fn update(&mut self, _ctx: &Context<Self>, msg: Self::Message) -> bool {
        match msg {
            Msg::Resize => {
                // 此处编写尺寸计算、canvas重绘等业务逻辑
                true
            }
        }
    }
}

实现注意事项：

1. 闭包必须加move关键字，将自有所有权的link实例移动进闭包，禁止借用外部短生命周期引用
2. 禁止在事件闭包中捕获self或ctx的引用，所有和组件的交互都通过ComponentLink发消息完成
3. 监听器实例存储在组件结构体中即可，组件销毁时会自动drop监听器、解绑事件，无需手动清理

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