组件的生命周期 【 组件的钩子有哪些？ 】
-
为什么要使用生命周期？ 类比： 你自己生活阶段： 幼儿园 小学 初中 高中 大学 社会
-
我们想要使用组件，那么就得在组件的特定阶段完成特点的任务 【 特定时间点，完成特点任务 】
-
名词： 钩子： 【 姜太公钓鱼，愿者上钩 】 机遇
- 特点时间点，触发的一个方法
-
组件的生命周期分为三个阶段： 初始化、运行中、销毁 8个钩子函数 【 会写，会念，会用 】
-
生命周期钩子不允许写成箭头函数，因为箭头函数会改变this指向
-
初始化
- beforeCreate () {}
- 组件即将创建
- 任务： 初始化事件，并且为整个生命周期的开始做准备【 举例： 相亲：老爸老妈给你做准备和谋划】
- 意义：
- 数据未获取，真实dom未拿到
- 数据请求，数据修改
- created () {}
- 组件创建结束 【 举例： 老爸老妈告诉你了让你相亲 】
- 任务： 进行数据的注入和数据的反应
- 意义：
- 数据拿到了，真实dom没有拿到
- 数据请求，数据修改
- beforeMount () {} 【 举例： 男女互加微信，聊一下 】
- 组件即将挂载
- 任务： 判断组件是否有el/template选项，如果有那么使用render函数将template模板中的jsx转换成VDOM对象模型，如果没有，需要我们使用$mount/outerHTML手动挂载
- 意义：
- 更多的是内部完成任务，我们外部就不干预了
- 数据请求，数据修改
- mounted () {} 【 举例： 网络约见面 】
- 组件挂载结束
- 任务： 将vdom渲染为真实dom,然后挂载到页面中，这个时候我们在页面中可以看到内容了
- 意义：
- 操作真实dom 【 可以进行第三方库实例化 】
- 数据请求，数据修改
- 总结;
- 我们常将数据请求写在 created 中，因为created钩子是第一次获得数据的地方
- mounted钩子函数可以进行DOM操作【 第三方库实例化【静态数据】 】
- beforeCreate () {}
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <p> {{ msg }} </p> </div> </body> <script src="../../../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { msg: 'hello 今天周三' }, beforeCreate () { console.log('1-beforeCreate') console.log('data', this.msg ) console.log('dom',document.querySelector('p')) fetch('./data/data.json') .then( res => res.json() ) .then( data => { this.msg = data.name }) .catch( error => console.log( error )) }, created () { console.log('2-created') console.log('data', this.msg ) console.log('dom',document.querySelector('p')) fetch('./data/data2.json') .then( res => res.json() ) .then( data => { this.msg = data.name }) .catch( error => console.log( error )) }, beforeMount () { console.log('3-beforeMount') console.log('data', this.msg ) console.log('dom',document.querySelector('p')) fetch('./data/data2.json') .then( res => res.json() ) .then( data => { console.log('data',data) this.msg = '李四' }) .catch( error => console.log( error )) }, mounted () { console.log('4-mounted') console.log('data', this.msg ) document.querySelector('p').style.background = 'red' fetch('./data/data2.json') .then( res => res.json() ) .then( data => { console.log('data',data) this.msg = '王麻子' }) .catch( error => console.log( error )) } }) </script> </html>- 运行中
- beforeUpdate 组件更新前 【 见面 的结果】
- 触发条件： 组件的数据发生改变
- 任务： VDOM重新生成，然后通过diff算法和以前的VDOM比对，生成patch补丁对象 【 内部进行 】
- updated 组件更新结束 【 证明第一次相亲是失败的，换了一个人 】
- 触发条件： 组件的数据发生改变
- 任务： 将patch补丁对象进行渲染生成真实dom
- 意义：
- 可以操作DOM 【 第三方库的实例化【 动态数据 】 】
- 总结： 平时大家使用updated进行第三方库实例化
- beforeUpdate 组件更新前 【 见面 的结果】
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click = "flag = !flag"> 点击 </button> <p v-if = "flag"> 内容 </p> </div> </body> <script src="../../../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { flag: true }, beforeUpdate () { // 触发条件是： 组件的数据发生了改变 console.log('beforeUpdate') console.log('data',this.flag) console.log('dom',document.querySelector('#app')) }, updated () { console.log('updated') console.log('data',this.flag) console.log('dom',document.querySelector('#app')) } }) </script> </html>- 销毁
- 意义： 用来完成善后工作 【 计时器， 第三库实例， window.onscroll 】
- 组件的销毁有两种形式
- 内部销毁 【 你可以将这个信息告诉父亲 】 $destroy
- 组件会被销毁掉，但是组件的DOM外壳还在
- 外部销毁 【你父母得知相亲的结果是由别人告知的】
- 通过开关销毁 【 推荐 】
- 内部销毁 【 你可以将这个信息告诉父亲 】 $destroy
- 组件的销毁会触发两个钩子函数 【 没啥差别， 任意选择一个使用 】
- beforeDestroy () {} 销毁前
- destroyed () {} 销毁结束
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> </head> <body> <div id="app"> <button @click = "flag = !flag"> 点击 </button> <p v-if = "flag"> 内容 </p> <button @click = "remove"> 销毁 </button> </div> </body> <script src="../../../lib/vue.js"></script> <script> new Vue({ el: '#app', data: { flag: true }, created () { this.timer = setInterval(() => { console.log('hello ') },1000) this.obj = { name: 1 } }, methods: { remove () { this.$destroy() } }, destroyed () { console.log('destroyed') document.querySelector('#app').remove() clearInterval( this.timer ) delete this.obj } }) </script> </html> -
-
生命周期案例 【 轮播 】
- Swiper 第三方类库
- 数据请求 + 数据修改 created中写
- 静态数据第三方库实例化： mounted
- 动态数据第三方库实例化： updated【 做判断 ，避免重复实例化】 / Vue.nextTick【 this.$nextTick】 /setTimeout
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title> swpier </title>
<link href="https://cdn.bootcss.com/Swiper/4.5.0/css/swiper.css" rel="stylesheet">
<script src="https://cdn.bootcss.com/Swiper/4.5.0/js/swiper.js"></script>
</head>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
<body>
<div id="app">
<input type="text" v-model = "num">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for ="item in banners" :key = "item.id">
<img :src = "item.img" style = "width: 100%;height: 100%;" />
</div>
</div>
<!-- 如果需要分页器 -->
<div class="swiper-pagination"></div>
<!-- 如果需要导航按钮 -->
<div class="swiper-button-prev"></div>
<div class="swiper-button-next"></div>
<!-- 如果需要滚动条 -->
<div class="swiper-scrollbar"></div>
</div>
</div>
</body>
<script src="../../../lib/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
banners: [],
num: 100
},
created () {
fetch('./data/banner.json')
.then( res => res.json())
.then( data => {
this.banners = data
// 方案二
// setTimeout(() => {
// if( this.mySwiper ) return false
// this.mySwiper = new Swiper ('.swiper-container', {
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
// })
// },0)
// 方案三 Vue中提供了一个 $nextTick this.$nextTick Vue.nextTick
// Vue中nextTick表示DOM更新结束之后执行
// this.$nextTick(() => {
// this.mySwiper = new Swiper ('.swiper-container', {
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
// })
// })
Vue.nextTick(() => {
this.mySwiper = new Swiper ('.swiper-container', {
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
})
.catch( error => console.log( error ))
},
updated () {
console.log('updated')
// 这是一种方案
// if( this.mySwiper ) return false
// this.mySwiper = new Swiper ('.swiper-container', {
// loop: true, // 循环模式选项
// // 如果需要分页器
// pagination: {
// el: '.swiper-pagination',
// },
// // 如果需要前进后退按钮
// navigation: {
// nextEl: '.swiper-button-next',
// prevEl: '.swiper-button-prev',
// },
// // 如果需要滚动条
// scrollbar: {
// el: '.swiper-scrollbar',
// },
// })
},
destroyed () {
delete this.mySwiper
}
})
</script>
</html>
-
生命周期要求： 【 必须会的 】
- 三个阶段，8个钩子函数，每个钩子函数任务和它的作用
- 项目中如何使用
- 数据请求 + 数据修改 created中写
- 静态数据第三方库实例化： mounted
- 动态数据第三方库实例化： updated【 做判断 ，避免重复实例化】 / Vue.nextTick【 this.$nextTick】 /setTimeout
- 善后工作： destroyed
扫一扫
220
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
