先放一幅图
beforcreate、created
<body>
<div id="app">
<hehe></hehe>
</div>
<template id="hehe">
<div class = 'test'>
<p ref='p'>{{num}}</p>
</div>
</template>
<script>
Vue.component('hehe',{
template:'#hehe',
data(){
return {
num:1
}
},
beforeCreate() {
// 创建之前 没有初始化数据 同时没有真实dom 基本不用
console.log('创建之前')
console.log('this',this)
console.log('data',this.num) undefined
console.log('dom',this.$refs['p']) undefined
},
created(){
//创建结束 有数据 没有dom
// 可以修改数据 在这里修改数据不会触发运行中的更新的生命周期
// 可以网络请求
console.log('创建结束')
console.log('this',this)
console.log('data',this.num)
this.num=5
console.log('dom',this.$refs['p'])
}
})
let vm=new Vue({
el:"#app",
})
</script>
beforemount、mounted
beforeMount() {
// 挂载之前和created类似 有数据 可以改数据 没有dom
// 可以做网络请求
console.log('挂载之前')
console.log('this',this)
console.log('data',this.num)
console.log('dom',this.$refs['p'])
},
mounted(){
//挂载结束 有数据 有dom
// 可以修改数据 可以修改dom
// 初始化的操作 swiper
console.log('挂载结束')
console.log('this',this)
console.log('data',this.num)
this.num=5
console.log('dom',this.$refs['p'])
}
updata、beforupdata
beforeUpdate() {
// 挂载之后数据更新的时候触发,挂载之前数据跟新不会触发
// 数据 是更新之后的
// dom dom是更新之前的
console.log('更新之前')
console.log('this',this)
console.log('data',this.num)
console.log('dom', this.$refs.p.innerHTML)
},
updated() {
// 数据与dom都跟新完了触发
// 数据 是更新之后的
// dom dom是更新之后的
// 注意做数据的修改操作 可能引起死循环
console.log('更新之前')
this.num=Math.random()
console.log('this',this)
console.log('data',this.num)
console.log('dom', this.$refs.p.innerHTML) //这里如果不打印innerHTML显示的时没有修改过的
},
beforDestory、destoryed
销毁声明周期。
beforeDestroy() {
// 有数据 有this 也都没用
// 有dom
console.log('销毁之前')
console.log(this)
console.log(this.num)
console.log(this.$refs['p'].innerHTML)
},
destroyed() {
// 有数据 有this 但是没有用
// 没有dom
console.log('销毁之后')
console.log(this)
console.log(this.num)
console.log(this.$refs['p'].innerHTML)
}
})
beforDestory销毁前主要做的事是清除一些事件监听或者计时器
mounted(){
//将计时器挂载当前实例上
this.timer=setInterval(() => {
console.log(1)
}, 1000);
},
destroyed() {
// 我回顾组件的一生 寻找遗留的遗憾 错事 解决遗憾
// 全局计时器 全局事件监听
clearInterval(this.timer)
},
另外还有 activated deactivated 这两个是通过keep-alive缓存激活或者停用时使用,放到以后再说
errorCaptured这个生命周期函数,当捕获一个来自子孙组件的错误时被调用,感兴趣的自行了解。
$nextTick
nextTick里面是在dom渲染完成的回调后执行的,通俗来讲就是在某一个场景下,希望用到真实dom,但是当前并没有渲染成为真实dom。
下面放一个案例,关于$nextTick的应用场景
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/css/swiper.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/Swiper/4.0.0/js/swiper.min.js"></script>
<style>
.swiper-container {
width: 600px;
height: 300px;
}
.swiper-slide {
background: red;
}
</style>
</head>
<body>
<div id="app">
<div class="swiper-container">
<div class="swiper-wrapper">
<div class="swiper-slide" v-for="item in list">
<img :src="item" alt="" style="width: 100%;height: 100%">
</div>
</div>
</div>
当前计数:{{number}}
<br />
<button v-on:click="increment">+</button>
<button v-on:click="decrement">-</button>
</div>
<script>
let app = new Vue({
el: '#app',
data: {
list: []
},
methods: {
initSwiper() {
new Swiper('.swiper-container', {
direction: 'horizontal', // 垂直切换选项
loop: true, // 循环模式选项
autoplay: true,
})
}
},
beforeCreate() {
console.log(this)
},
mounted() {
// 模拟一个网络请求,假设这个网络请求需要一秒
setTimeout(() => {
this.list = [
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2888261511,2808819884&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=2164734927,1367682520&fm=26&gp=0.jpg',
'https://dss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2422437459,525040718&fm=26&gp=0.jpg'
]
// 真实dom没有更新,也就是这一块的时候没有swiper,所以滚动不了,真实dom还没有更新
// 上一次数据修改 导致dom更新结束之后在执行内部的回调
this.$nextTick(() => { // 等你数据修改后的真实dom修改之后在执行这个函数
this.initSwiper()
})
}, 1000)
// 直接初始化swiper的话会有一个问题,轮播图滚动不了
// this.initSwiper()
},
})
</script>
</body>
</html>