Vue生命周期

mac2024-07-27  14

为什么要有生命周期 Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件

特别注意:钩子函数不要写成箭头函数,箭头函数可能会改变this指向

Vue的生命周期分为三个阶段,8个钩子函数(总共有11个函数)

初始化阶段

它们的公共特征

组件一旦创建,自动执行执行一次

他们各自的特点 / 功能 我会从下面几个方向研究: data中的数据是否能够获取,真实DOM是否能获取

beforeCreate 不能获取数据,也不能获取真实DOM它可以对new Vue()出来的时候,做初始化事件和生命周期做准备,这些都是内部完成的总结: 这个钩子我们在项目中可以不用 created 初始化data选项 对data选项中的数据做数据劫持【 用es5 Object.defineProperty做getter和setter设置 】 可以获取数据,但是不能获取真实DOM 可以对数据做计算、转换、修改等操作 总结: 数据请求,然后将请求的结果赋值给我们的数据 beforeMount 组件挂载前的准备工作 判断是否有el,如果el,那么我们在去判断是否有template,如果都有,通过render函数将jsx渲染为VDOM,这里我们就有了VDOM,如果没有el,那么我们可以使用 $mount手动挂载,如果没有template选项,那么我们使用outerHTML手动写一个进去可以获得数据,不能得到真实DOM 可以对数据做计算、转换、修改等操作 总结: 数据请求,然后将请求的结果赋值给我们的数据,这个钩子我们就让它做内部事务去吧,不去用它 mounted 表示组件挂载结束,也就是生成的html已经插入页面结束了 数据可以获取,真实dom也可以获取 我们可以操作真实DOM,可以对数据做计算、转换、修改等操作

总结: 项目中 数据请求 -> created/mounted DOM操作 -> mounted

面试题

vue中数据请求往哪里写? 数据请求初始化阶段都可以写 数据的修改我们后三个钩子 我习惯往mounted里面写vdom真正在哪里生成的?jsx在哪里解析的?真实dom哪里生成了?

更新阶段

触发条件: 数据改变

beforeUpdate 任务: 数据改变,重新生成vdom,然后通过diff算法得到patch补丁对象,自动完成任务总结: 不操作 updated 更新结束,那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了

总结:

也就是我们在这个阶段使用updated钩子就行

销毁阶段

销毁阶段钩子函数的作用是: 自动删除事件以及监听触发条件: 组件被销毁 外部销毁: 开关【 v-if 】内部销毁; 调用 this.$destroy() 内部销毁组件会被删除,但是组件的真实dom外壳会被遗留 钩子函数有两个: 这两个钩子函数没有差别,任意用一个即可 beforeDestroydestroyed 手动操作的作用: 善后 清除计时器、滚轮事件

错误捕获

errorCaptured

当捕获一个来自子孙组件的错误时被调用。此钩子会收到三个参数:错误对象、发生错误的组件实例以及一个包含错误来源信息的字符串。此钩子可以返回 false 以阻止该错误继续向上传播。
最新回复(0)