vue生命周期钩子函数(详解及使用场景)

时间:2025-01-18 18:16:29

1、updated*修改之后调用*beforeUpdate、updated可以监控data里的所有数据变化*不要在updatebeforeUpdate修改不定数据,否则会引起死循环*监听data里的所有的数据,非updated莫属beforeDestroy*实例卸载以前调用,可以清理非vue资源,防止内存泄露

2、watch:监听特定值的变化,监听路由参数的变化,用函数的形式不能监听对象的变化(与updated对立)](https://img-blog.****img.cn/png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MzczNDQ5MA==,size_color_FFFFFF,t_

3、deactivated缓存组件卸载的时候调用

4、beforeUpdate*修改之前调用

5、created(使用频率高)*实例被创建完成后调用*能拿到数据*能修改数据,*且修改数据不会触发updatedbeforeUpdate钩子函数*可以在这个钩子函数里发请求,访问后端接口拿数据*判断是否存在el,是否存在template,如果二者都有,以template为主优先,如果没有template,会选择el模板。如果二者都没有,有$mount也可以调用模板beforeMount

6、activated(使用频率较低)keep-alive缓存组件时候调用

7、destroyed