生命周期 ( 王者 )
- 什么是生命周期?
vue中的生命周期指的是 组件 从创建到销毁一个过程,在这个过程中,我们在每一个特定的阶段会触发一些方法( 这些方法具备一些功能),我们给这些方法起了个名字叫做( 生命周期钩子函数/ 组件钩子 ) - 为什么要学习生命周期?
因为我们想在生命周期钩子中实现项目功能,那么我们必须知道每一个钩子函数的具体用途 - 这个生命周期是谁的生命周期?
组件 - 项目中生命周期如何书写( 功能 )
生命周期过程
Vue的生命周期分为三个阶段,分别为: 初始化,运行中, 销毁,一共8个钩子函数
注意: 生命周期钩子函数不允许写成箭头函数
-
------------------------初始化:---------------------------
beforeCreate ------------ 相亲准备前( 爸妈准备, 你根本是局外人 )
1. 组件创建前触发,目的是为了组件的生命周期 和 组件中的事件做准备
2. (组件中的)数据没有获得,真实dom也没有渲染出来
3. 可以进行数据请求,提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
4. 执行一次created ------------ 爸妈告诉你了,这边有几个备选, 选一个吧
1. 组件创建结束
2. (组件中的)数据得到了,真实dom没有渲染出来
3. 可以进行数据请求,提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
4. 执行了一次
beforeMount ----------- 互相加一个微信,先聊天
1. 组件挂载前
2. 任务: 判断el 判断 template
如果el没有,那么我们需要手动挂载,如果有,那么判断template
如果template有,那么进行render函数
如果template没有,那么通过 outerHTML 手动书写模板
3. (组件中的)数据可以获得,但是真实dom还没有渲染
4. 可以进行数据请求,也提供了一次数据修改的机会(例如用fetch请求可以将组件中的数据修改)
5. 执行一次
-------期间暗自内部进行render函数渲染
mounted ------------ 见面
1. 组件挂载结束
2. (组件中的)数据获得了,真实dom也获得了
3. 可以进行数据请求,也就可以修改数据(例如用fetch请求可以将组件中的数据修改)
4. 执行了一次
5. 可以进行真实dom的操作了( 可以进行第三方库的实例化了 )综上总结:
兵哥推荐:
1. 数据请求一般写在created里面
2. 第三方库实例化我们一般会往mounted中写 -
-------------------------- 运行中------------------------------
触发条件:数据更新
beforeUpdate
1. 更新前
2. 重新渲染 VDOM , 然后通过diff算法比较两次vdom,生成patch 补丁对象
3. 这个钩子函数更多的是内部进行一些操作,我们就不在多干预了
4. 可以触发多次
updated
1. 更新结束
2. 真实dom得到了,数据也得到了( 更新后的 )
3. 动态数据获取( 第三方库实例化 ) -
-------------------- vue生命周期的销毁阶段 -------------------
触发条件: 当组件销毁时:
beforeDestroy
destroyed-
如何实现
配置项写在生命周期钩子函数的上 -
统一讲两个钩子
为什么?
因为这两个钩子功能一致的,这两个钩子没有太大的区别 -
作用:
用来做善后的,比如计时器的关闭 第三方实例的删除 -
Vue的销毁有两种形式
- 通过开关的形式 - 外部销毁
- 通过调用 $destroy 方法 - 内部销毁
-
对比: 内部销毁 vs 外部销毁
外部销毁不仅能销毁组件,也能销毁该组件的dom结构
内部销毁只能销毁组件,不能销毁组件的dom结构<div id="app"> <Hello></Hello> </div> <template id="hello"> <div class="hello-box"> <button @click = "clear"> 销毁 </button> hello </div> </template>
Vue.component('Hello',{ template: '#hello', methods: { clear () { this.$destroy() //通过调用$destroy方法配合 } //beforeDestroy()和destroyed()实现组件销毁 }, mounted () { this.time = setInterval ( () => { console.log( '1903' ) },1000) }, beforeDestroy () { console.log('beforeDestroy') clearInterval( this.time ) document.querySelector('.hello-box').remove() }, destroyed () { console.log('destroyed') } }) new Vue({ el: '#app', data: { flag: true } })
-