Vue 生命周期函数 详细讲解+中文图解 一目了然 ~ 内有干货 |
您所在的位置：网站首页 › vue的八大生命周期 › Vue 生命周期函数 详细讲解+中文图解 一目了然 ~ 内有干货 |
Vue 生命周期函数 详细讲解+中文图解 一目了然 ~ 内有干货
|
文章目录
一、何为生命周期？1、含义2、理解3、注意点
二、Vue生命周期的主要阶段及其11个周期函数1、Vue生命周期的主要阶段：2、图解3、代码注释（配合理解）4、面试题？
一、何为生命周期？
1、含义
生命周期：从vue实例产生开始到vue实例被销毁这段时间所经历的过程。
2、理解
vue实例的创建和销毁过程 好比人的一生从出生到死亡过程。在其中的一些重大经历，也就是特殊时间点，我们可以做什么事情（12岁小学毕业上初中，15岁初中毕业上高中等等）。在vue的一生中，从vue组件创建开始一直到其被销毁时的时间段中，也被作者建立几个特殊的时间点，为了方便开发者实现在特定的时候让vue做特定的时间做特定的事情。作者允许我们通过一个叫做“生命周期钩子函数”的方法进行设置。在vue中，vue的一生被11个生命周期钩子函数给支配着。也可以理解为回调函数，当我们写了周期函数后，在规定的时间点，vue会自动执行这个函数
3、注意点
钩子函数与正常的函数无差异，唯一的不同就是钩子函数名称是固定的。
二、Vue生命周期的主要阶段及其11个周期函数
11个生命周期函数硬记是很难记住的，我们把他分为四个阶段就比较容易理解和记忆了 1、Vue生命周期的主要阶段：注：常用的生命周期钩子函数共8个，后三个大部分组件是不具备的 a、创建阶段（初始化相关属性）(必走） beforeCreate - 注意点：在此时不能获取data中的数据，也就是说this.msg得到的是undefinedcreated b、挂载阶段(必走） beforeMountmounted【页面加载完毕的时候就是此时】注意点：默认情况下，在组件的生命周期中只会触发一次 c、更新阶段（元素或组件的变更操作）（可能走） beforeUpdateupdated 注意点：可以重复触发的 d、销毁阶段（销毁相关属性）（必走，例：关页面时） beforeDestroydestroyed 以下俩个周期是keep-alive组件所特有的生命周期钩子函数： 注：如果我们没有用到keep-alive组件的话，当前代码是不会触发这两个组件的 activated deactivated 错误边界周期函数（自定义控制台报错的函数）：（不怎么用）errorCaptured 2、图解注：图出自https://www.bilibili.com/video/BV15741177Eh?t=21 关于生命周期涉及到的方法及其专业介绍，可以参考Vue官网API：https://cn.vuejs.org/v2/api/#%E9%80%89%E9%A1%B9-%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F%E9%92%A9%E5%AD%90 3、代码注释（配合理解） {{msg}} new Vue({ el: "#app", data: { msg: "已被生命周期支配" }, // 第一个周期函数：在组件创建之前触发 beforeCreate() { console.log('1. 创建之前触发'); // 在这个周期中无法操作data中的数据，因此这个周期函数以后一般不用 console.log(this.msg); }, // 第二个周期函数：在组件创建之后触发 created() { console.log('2. 创建之后触发'); // 在这个周期中可以操作data中的数据的（常用周期函数之一） console.log(this.msg); // 注意：前后端分离式开发，网络请求就写在这周期里 }, // 第三个周期函数：在组件挂载之前触发 beforeMount() { console.log('3. 挂载之前触发'); // 这个周期函数以后一般不用 }, // 第四个周期函数：在组件挂载之后触发 mounted() { console.log('4. 挂载之后触发'); // 我们看到的页面渲染完毕呈现在浏览器上，就处于这个周期执行完的位置。 // 用于操作以前要求页面加载完毕才能操作的东西。例如：获取滚动条的位置 }, // 第五个周期函数：在组件更新之前触发 beforeUpdate() { console.log('5. 组件更新之前触发'); }, // 第六个周期函数：在组件更新之后触发 updated() { // 注意点： // 1、第五、六周期可能会被重复触发多次，也可能1次都不触发； // 2、不能只是单纯的改变data中的数据，一定要使得页面重新渲染才会走第五/六步骤； // 3、切记不要在5、6周期中书写异步请求并且给具备双向数据绑定的data赋值，会死循环； console.log('6. 组件更新之后触发'); }, // 第七个周期函数：在组件销毁之前触发 beforeDestroy() { // 一般在这里写离开该组件/页面前的善后处理 // 例如：清除定时器、移除事件监听、销毁巨耗资源的动画效果、取消还未响应的网络请求等。 console.log('7. 组件销毁之前触发'); }, // 第八个周期函数：在组件销毁之后触发 destroyed() { console.log('8. 组件销毁之后触发'); } }) 4、面试题？ 常用的vue的生命周期是哪些？要点：4阶段，8个周期函数 如果组件存在父子关系的时候，父组件（A）与子组件（B）生命周期执行的顺序是怎样的？ 思路： - A组件有8个常用周期：创建2个、挂载2个、更新2个、销毁2个 - B组件有8个常用周期：创建2个、挂载2个、更新2个、销毁2个答案：将8个周期划分为三阶段（1-4，5-6，7-8） - 渲染阶段：父1 → 父2 → 父3 → 子1 → 子2 → 子3 → 子4 → 父4 - 更新阶段：父5 → 子5 → 子6 → 父6 - 销毁阶段：父7 → 子7 → 子8 → 父8 |
【本文地址】
今日新闻 |
推荐新闻 |