vue生命周期初始化阶段
- 4个生命周期钩子【 Hook 】函数
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
- 项目中
生命周期更新阶段
- 触发条件: 数据改变
- 钩子函数一共有两个:
beforeUpdate
- 任务: 数据改变,重新生成vdom,然后通过diff算法得到patch补丁对象,自动完成任务
- 总结: 不操作
updated
-
更新结束,那么肯定已经获取真实DOM,也就是说我们可以做真实dom操作了
-
总结:也就是我们在这个阶段使用updated钩子就行
组件的销毁阶段
- 销毁阶段钩子函数的作用是:自动删除事件以及监听
- 触发条件: 组件被销毁
- 外部销毁: 开关【 v-if 】
- 内部销毁; 调用 this.$destroy()
- 内部销毁组件会被删除,但是组件的真实dom外壳会被遗留
- 钩子函数有两个: 这两个钩子函数没有差别,任意用一个即可
- beforeDestroy
- destroyed
- 手动操作的作用: 善后
- 清除计时器、滚轮事件