生命周期
1. 什么是生命周期呢？
当前组件在创建到销毁经历的一系列过程，称之为生命周期
2. 生命周期的分为几个阶段？每个阶段有哪些钩子函数
生命周期分为3个阶段，这三个阶段分别是： 初始化 、 运行中 、 销毁
初始化阶段：有4个钩子函数 ， 触发条件是自动的
beforeCreate
1. 组件即将创建，进行组件事件和生命周期的初始化
2. 项目中一般不使用
3. 有的开发者也会在这里进行数据请求
created
1. 组件创建完成
2. 项目中：
1） 异步请求接口数据
2） 数据修改
beforeMount
1. 组件即将挂载
2. 判断根实例组件是否有el选项，如果没有，那么手动挂载，判断根实例组件中的其他子组件是否有template选项，如果没有，那么使用outerHTML插入
3. 项目中：
1） 异步请求接口数据
2） 数据修改
mounted
1. 组件挂载结束
2. 使用真实DOM替换VDOM
3. 项目中
1） 异步请求接口数据
2） 数据修改
3） 真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
总结： 初始化过程中在项目中使用
数据请求：created
DOM操作： mounted
数据修改： beforeMount created mounted
运行中阶段：有2个钩子函数 ： 触发条件是： 当data选项中的数据发生改变时
beforeUpdate：
内部操作 ： vdom生成和diff的对比
我们可以不使用
updated
Rdom已经生成，可以进行异步数据请求得到的dom渲染的第三方库实例化
销毁阶段： 有2个钩子函数
beforeDestory: 组件即将销毁，准备调用 $destroy() 方法
destoryed： 组件销毁结束
这两个钩子函数没有什么区别，功能很相似
项目中：
这两个钩子函数都可以用来做善后,把一些计时器，第三方库实例化出来的实例
组件销毁的两种方式：
1. 使用$destroy()方法（内部销毁）
缺点： 会将组件的模板也保留下来
2. 使用开关销毁（外部销毁）
v-if
这种类型的销毁不会留有模板
有一个钩子函数可以不写，这个钩子函数就是我们 render 函数
-
生命周期中钩子函数的触发条件是什么？
-
项目中如何使用？
-
名词解释：
钩子函数： 钩子函数就是options配置项中的一个方法，在特定的触发条件（ 时机 ）下会自动触发 -
除了根实例组件以外，其他的组件中的数据项 data 必须是一个函数，而且这个函数必须返回一个对象
为什么是函数呢？
原因：我们希望组件的数据是独立的，有一定作用域的
为什么返回值是对象？
原因： 是为了符合 数据驱动 原理设计，让observer将data选项中的数据设置 getter 和 setter -
其他选项写在生命周期的上
<!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>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
</head>
<body>
<div id="app">
<button @click = "flag = false"> 销毁 </button>
<Hello v-if = "flag"></Hello>
</div>
<template id="hello">
<div>
<input type="text" v-model = "money">
<h3> {{ money }} </h3>
</div>
</template>
</body>
<script>
Vue.component( 'Hello',{
template: '#hello',
data () { //除了根式
return {
money: 2000
}
},
//初始化
beforeCreate () {
/*
这个阶段：组件创建前
data data选项中的数据获取不到
RDOM 拿不到
项目中： 没什么用
但是这个阶段是一个对事件和生命周期的准备阶段，也是必不可少的
*/
console.log('1-beforeCreate')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
created () { // 组件创建结束
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 20000
console.log('2-created')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
beforeMount () { //组件即将挂载
/*
这个阶段：
data data选项中的数据获到了
RDOM 拿不到
项目中：
数据的修改
异步数据请求
*/
this.money = 10000000
console.log('3-beforeMount')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
mounted () { //组件挂载结束了
/*
这个阶段：
data: 可以获得数据
RDOM: 拿到了
项目中：
数据修改
异步数据请求
真实DOM操作可以了( Vue一般情况下不要直接操作真实DOM, 一般可以进行第三方库的实例化（静态数据渲染来的） )
*/
this.time = setInterval( () => {
console.log( 1 )
},1000)
document.querySelector('h3').style.background = 'red'
console.log('4-mounted')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// ------------------------------------运行中---------------------
beforeUpdate () { //表示组件即将更新 vdom --diff--> vdom的不同（patch对象）
/*
这个阶段：
data: 拿到了
RDOM： 获得
这个阶段进行的是vdom的生成和diff算法的对比，都是内部进行的，我们在项目中可以不使用
*/
console.log(' 1- beforeUpdate ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
updated () { // 组件更新结束 ， 通过render函数将vdom渲染成了真实dom,然后驱动vue进行视图更新
/*
这个阶段：
动态数据的渲染，进行dom操作（ 第三方库的实例化 ）
*/
document.querySelector('h3').style.background = 'blue'
console.log(' 2- updated ')
console.log( 'data', this.money )
console.log( '真实DOM',document.querySelector('h3') )
},
// --------------------------------------销毁 -------------
beforeDestroy () {
console.log( 'beforeDestroy ')
},
destroyed () {
clearInterval( this.time )
console.log( 'destroyed')
}
})
new Vue({
// el: '#app',
data: {
msg: 'hello 1902',
flag: true
}
}).$mount('#app')
</script>
</html>
轮播图例子
<!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>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.2/js/swiper.min.js"></script>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
</style>
</head>
<body>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide"
v-for = 'list in lists'
:key = 'list.id'>{{list.content}}</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>
new Vue({
el:'#app',
data:{
lists:null
},
created() {
fetch('./data.json')
.then(res => res.json())
.then(data => {
this.lists = data
this.$nextTick(() =>{
this.swiper = new Swiper ('.swiper-container', {
// direction: 'vertical', // 垂直切换选项
loop: true, // 循环模式选项
// 如果需要分页器
pagination: {
el: '.swiper-pagination',
},
// 如果需要前进后退按钮
navigation: {
nextEl: '.swiper-button-next',
prevEl: '.swiper-button-prev',
},
// 如果需要滚动条
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
})
.catch(error =>{
if(error) throw error
})
},
mounted() {
},
});
</script>
</html>
3524
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
