谈谈你对 Vue 生命周期的理解？

1. 生命周期是什么？Vue 实例有一个完整的生命周期，也就是从开始创建、初始化数据、编译模版、挂载 Dom -&gt; 渲染、更新 -&gt; 重新渲染、卸载等一系列过程，我们称这是 Vue 的生命周期。2. 各个生命周期的作用<table style="width: 100%;"><tbody><tr><th colspan="1" rowspan="1" width="233.96" style="text-align: left;">生命周期</th><th colspan="1" rowspan="1" width="574.31" style="text-align: left;">描述</th></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">beforeCreate</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">组件实例被创建之初，组件的属性生效之前</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">created</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">组件实例已经完全创建，属性也绑定，但真实 dom 还没有生成，$el 还不可用</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">beforeMount</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">在挂载开始之前被调用：相关的 render 函数首次被调用, 但页面还没有挂载显示, $ref还不可用</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">mounted</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">已挂载, 也就是已经显示到界面上了, 此时可能通过$ref访问到页面元素或组件对象</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">beforeUpdate</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">组件数据更新之后, 界面更新之前调用, 如果此时获取的界面是旧的界面</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">updated</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">界面更新之后调用, 如果此时获取界面主是新的界面了</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">activited</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">keep-alive 专属，组件激活时调用</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">deactivated</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">keep-alive 专属，组件失活时调用</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">beforeDestory</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">组件销毁前调用, 一般在此做一些收尾的工作, 如: 取消定时器, 解绑监听</td></tr><tr><td colspan="1" rowspan="1" width="auto" style="text-align: left;">destoryed</td><td colspan="1" rowspan="1" width="auto" style="text-align: left;">组件销毁后调用</td></tr></tbody></table>3. 生命周期示意图<img src="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710144767722.png" alt="https://jsd.onmicrosoft.cn/gh/iGaoWei/codercdn@master/question/20240627/2024062710144767722.png" data-href="" style="">

DreamCoders/CoderGuide

内容风险标识

评论 (0)

DreamCoders/CoderGuide .gitee-modal { width: 500px !important; }

内容风险标识