Vue中的生命周期
为什么要有生命周期?
-
Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能,方便我们更好的去控制组件
-
Vue的生命周期分为三个阶段,8个钩子函数
初始化
beforeCreate
组件创建前
- 作用: 为整个生命周期做准备工作,初始化事件和自身或是子组件的生命周期做准备
- 意义:
- 数据拿不到
- 真实dom拿不到
- 项目中:不常用
created
组件创建结束
- 作用: 初始化注入其他选项 和 激活 选项
- 意义:
- 数据可以拿到
- 真实dom拿不到
- 项目中:数据请求,也可以修改一次数据
beforeMount
组件挂载前(挂载: 组件插入到页面)
- 意义:
- 数据可以拿到
- 真实dom没有拿到
- 在项目中
- 数据请求,数据修改
- 不建议使用,让它完成内部事务,不增加负担
- 内部事务
- 判断el选项 - new Vue 是否有 el
- 有,继而判断是否有template选项,证明有子组件
- 有template,那么我们通过render函数将jsx解析为VDOM对象模型
- 无template,那么我们需要通过outerHTML手动渲染
- outerHTML,元素外进行渲染,并且会代替原来的容器盒子,并且template在实例内会被解析,将来不会渲染到页面
- 无: 那么我们需要手动挂载: new Vue().$mount(’#app’)
- 有,继而判断是否有template选项,证明有子组件
- 判断el选项 - new Vue 是否有 el
mounted
组件挂载结束,也就是已经插入到页面中了
- 意义:
- 数据可以拿到
- 真实DOM也可以拿到
- 项目中
- 数据修改,数据请求
- 真实DOM操作 【 不推荐 】
- 理由: 我们要用数据驱动视图
- 应该做的: 第三方实例化 【 静态数据 】
运行中
运行中触发条件是: 数据改变
只要数据改变,就会触发这两个钩子函数
beforeUpdate
组件更新前
-
意义:
- 数据是可以拿到更新后的数据(为在一次的更新准准备工作)
- 也可以拿到更新后的真实DOM (生成Virtual DOM )
-
项目中:不常用.
update
- 意义:
- 可以拿到修改后的数据
- 也可以拿到真实DOM
- 在项目中:
- 可以进行真实DOM操作,但不推荐
- 第三方库动态实例化 【 动态数据 】
- 内部
- VDOM重新渲染,然后通过render函数解析为VDOM对象模型,在通过Diff进行比对生成patch补丁对象,然后重新渲染为真实DOM
- 只改变变化的部分,其他部分不改变
- VDOM重新渲染,然后通过render函数解析为VDOM对象模型,在通过Diff进行比对生成patch补丁对象,然后重新渲染为真实DOM
销毁
触发条件:组件被删除
- 外部开关销毁
- 内部调用$destroy()
beforeDestroy和destroyed
- 外部销毁
- 通过开关完成(v-if、v-show)
- DOM被删除了,组件也被删除了
- 通过开关完成(v-if、v-show)
- 内部销毁
- 通过调用$destroy()来完成
- DOM没有被删除,但是组件被删除了
- Dom需要手动删除
- 通过调用$destroy()来完成
- 项目中如何使用:
- 善后
- 比如: 计时器、滚动事件等
- 善后
生命周期Swiper案例
-
静态数据
<body> <div id="app"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for = "item in banners" :key = "item.id" > {{ item.text }} </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: { banners: [ { id: 1, text: 'banner1' }, { id: 2, text: 'banner2' }, { id: 3, text: 'banner3' } ] }, mounted () { var mySwiper = 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', }, }) } }) </script>
-
动态数据
-
将请求写在created函数中
created () { fetch('./data/banner.json') .then( res => res.json()) .then( data => { this.banners = data }) .catch(error => console.log( error )) }
-
在update中直接写时,会有重复实例化问题
-
解决方案:
- 加判断条件
updated () { if( !this.swiper ) { console.log('update') 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', }, }) } }
- setTimeout(放在主线程后执行,异步队列中,保证真实DOM渲染完成)
created () { fetch('./data/banner.json') .then( res => res.json()) .then( data => { this.banners = data ; // 进行异步处理 setTimeout(() => { 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', }, }) }, 0); }) .catch(error => console.log( error )) }
- Vue内部提供的 nextTick(推荐)
- nextTick表示真实DOM渲染完成之后才执行
- Vue.nextTick( callback )
- this.$nextTick( callback )
- nextTick表示真实DOM渲染完成之后才执行
created () { fetch('./data/banner.json') .then( res => res.json()) .then( data => { this.banners = data Vue.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 => console.log( error )) }
-
-
-
附上官网生命周期图
scrollbar: {
el: '.swiper-scrollbar',
},
})
})
})
.catch(error => console.log( error ))
}
```
- 附上官网生命周期图
[外链图片转存中…(img-Wmq7wpdk-1566877959736)]