生命周期
初始化
自动执行
研究方向
数据
真实DOM
beforeCreate
组件创建前
作用:为整个生命周期做准备工作,初始化事件和自身或是子组件的生命周期做准备
意义:1.数据拿不到 2.真实DOM拿不到
created
组件创建结束
作用:初始化注入其他选项和激活选项
意义:数据拿到了,但是真实DOM拿不到
项目中:1.数据请求,2.也可以修改一次数据
beforeMount
组件挂载前
挂载:组件插入到页面前
意义:1.数据能拿到 2.真实DOM拿不到
项目中:1.数据请求,数据修改 2.建议不要去使用他,让他完成内部事务,不给加负担
内部完成事务 1.判断el选项-new Vue是否有el -
有,继而判断是否有template选项,证明有子组件
- 有template,那么我们通过render函数将jsx解析为VDOM对象模型
- 无template,那么我们需要通过outerHTML手动渲染
- outerHTML,元素外进行渲染,并且会代替原来的容器盒子,并且template在实例内会被解析,将来不会渲染到页面
- 无: 那么我们需要手动挂载: new Vue().$mount('#app')
Mounted
组件挂载结束,也就是已经插入到页面中了
意义:1.数据能拿到 2.真实DOM能拿到
项目中:数据修改,数据请求 2.真实DOM操作【不推荐】
- 理由:我们要用数据驱动视图
- 应该做的:第三方实例化【静态数据】
运行中
运行中触发条件是 :数据改变
只要数据改变,就会触发这两个钩子函数
beforeUpdate
组件更新前
类比:见面奔现失败后,再一次进行
意义:数据是可以拿到更新后的数据,也可以拿到更新后的真实DOM。为再一次的更新做准备工作,生成虚拟DOM
项目中 不常用
update
组件更新结束
意义:可以拿到修改后的数据,也可以拿到真实DOM
在项目中:
真实DOM操作 第三方库动态实例化
内部
销毁
触发条件:组件被删除
外部开关销毁
内部调用$destroy()
beforeDestroy
destroyed
外部销毁
- 通过开关完成
- DOM被删除了,组件也被删除了
- 内部销毁
- 通过调用$destroy()来完成
- DOM没有被删除,但是组件被删除了
- Dom需要手动删除
- 项目中如何使用:
- 善后
- 比如: 计时器,比如滚动事件等