updated beforeUpdate() Updated() 生命周期-销毁阶段 vue的nextTick@stage3---week2--day4-1

updated && beforeUpdate() 和 Updated()钩子函数 && 生命周期-销毁阶段-外部销毁 && 生命周期-销毁阶段-内部销毁 && vuejs 的 nextTick

updated 钩子函数

页面数据已更新
任务通过diff算法对比新旧DOM，生成patch补丁对象，然后将补丁对象渲染为真实DOM，
渲染的是变化部分
得到真实DOM，可以进行DOM操作

<body><div id="app"><Hello></Hello></div><template id="hello"><div><button @click = "changeInfo"> changeInfo </button><p> {{ info }} </p></div></template>
</body>
<script src="../../lib/vue.js"></script>
<script>new Vue({el: '#app',components: {'Hello': {template: '#hello',data() {return {info: 'hello'}},methods: {changeInfo() {this.info = '距离国庆没几天了'}},beforeupdate() { //实例未完全创建出来执行 console.log(this.info);console.log('beforeCreate');},updated() { //页面数据已更新//任务通过diff算法对比新旧DOM，生成patch补丁对象，然后将补丁对象渲染为真实DOM，//渲染的是变化部分//得到真实DOM，可以进行DOM操作document.querySelector('p').style.background = 'blue'console.log('updated')},},}})
</script>

beforeUpdate() 和 Updated()钩子函数

----Swiper实例动态，但是还是有点小问题（后面会解决的）

在mounted()钩子函数时是Swiper静态的

<body><div id="app"><Swiper></Swiper></div><template id="swiper"><div class="swiper-container"><div class="swiper-wrapper"><div class="swiper-slide"v-for="banner in banners":key="banner.id"><img :src="banner.img"alt="error"></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></template>
</body>
<script src="../../lib/vue.js"></script>
<script>new Vue({el: '#app',components: {'Swiper': {template: '#swiper',data() {return {banners: []}},beforeCreate() { //实例未完全创建出来执行 console.log('beforeCreate');},created() { //methods和data已经初始化,常用于操作数据，发起ajax请求fetch('./mock/banner.json', {method: 'get'}).then((response) => {return response.json()}).then((result) => {this.banners = result;}).catch(err => console.log(err));},beforeMount() { //挂载数据之前console.log('beforeMount');},mounted() { //内存中的模板已挂载到页面中// var mySwiper = new Swiper('.swiper-container', {//     loop: true, // 循环模式选项//     // 如果需要分页器//     pagination: {//         el: '.swiper-pagination',//     },//     // 如果需要前进后退按钮//     navigation: {//         nextEl: '.swiper-button-next',//         prevEl: '.swiper-button-prev',//     },//     // 如果需要滚动条//     scrollbar: {//         el: '.swiper-scrollbar',//     },// })},beforeUpdate() { //数据更新之前//数据更新，但是页面上还是旧数据console.log('beforeUpdate');},updated() { //页面数据已更新var mySwiper = new Swiper('.swiper-container', {loop: true, // 循环模式选项// 如果需要分页器pagination: {el: '.swiper-pagination',},// 如果需要前进后退按钮navigation: {nextEl: '.swiper-button-next',prevEl: '.swiper-button-prev',},// 如果需要滚动条scrollbar: {el: '.swiper-scrollbar',},})},beforeDestroy() { //vue销毁之前console.log('beforeDestroy');},destroyed() { //已完全销毁},}}})
</script>

3-生命周期-销毁阶段-外部销毁

destroy()
作用
- 善后：清除Vue无法自动删除的副作用，比如：计时器、滚动事件、第三方实例

<body><div id="app"><button @click="destroy"> 销毁 </button><Hello v-if="flag"></Hello></div><template id="hello"><div>Hello</div></template>
</body>
<script src="../../lib/vue.js"></script>
<script>Vue.component('Hello', {template: '#hello',mounted() { //内存中的模板已挂载到页面中this.timer = setInterval(() => {console.log(1)}, 1000);window.onscroll = function() {console.log('scroll')}},destroyed() { //已完全销毁// 2. 作用// - 善后： 清除Vue无法自动删除的副作用，比如： 计时器、滚动事件、第三方实例clearInterval(this.timer);window.onscroll = null;},})new Vue({el: '#app',data: {flag: true},methods: {destroy() {this.flag = !this.flag;}},})
</script>

生命周期-销毁阶段-内部销毁

<body><div id="app"><Hello></Hello></div><template id="hello"><div class="hello-box"><button @click="destroy"> 内部销毁 </button>Hello</div></template>
</body>
<script src="../../lib/vue.js"></script>
<script>Vue.component('Hello', {template: '#hello',methods: {destroy() {this.$destroy();}},mounted() { //内存中的模板已挂载到页面中this.timer = setInterval(() => {console.log(1)}, 1000);window.onscroll = function() {console.log('scroll')}},beforeDestroy() { //vue销毁之前console.log('beforeDestroy');},destroyed() { //已完全销毁clearInterval(this.timer);window.onscroll = null;document.querySelector('.hello-box').remove();//delete this.arg//用delete 删除变量},})new Vue({el: '#app'})
</script>

总结 - 销毁阶段

beforeDestroy 和 destroyed 没啥差别
作用
- 善后：清除Vue无法自动删除的副作用，比如：计时器、滚动事件、第三方实例
形式
- 外部销毁
- 内部销毁
  - 区别：都可以删除组件，但是内部销毁会留有组件真实DOM
销毁触发条件：组件被删除
销毁
触发条件：组件被删除

销毁
触发条件：组件被删除
- 外部开关销毁
- 内部调用$destroy()
  这两个钩子函数没有太大区别，所以我们统一说
  - beforeDestroy
  - destroyed
- 外部销毁
  - 通过开关完成
    - DOM被删除了，组件也被删除了
- 内部销毁
  - 通过调用$destroy()来完成
    - DOM没有被删除，但是组件被删除了
    - Dom需要手动删除

swiper-vuejs 的 nextTick

![](http://www.jqhtml.com/wp-content/uploads/2017/10/swiper1017-17.gif)- 静态数据
- 动态数据- updated中写式，会有重复实例化问题- 第一个解决方案： 加判断条件- 第二个解决方案： setTimout- 放在主线程后执行，异步队列中，保证真实DOM渲染完成- 第三种解决方案： 推荐    Vue内部提供的  nextTick- ==nextTick表示真实DOM渲染完成之后才执行==- Vue.nextTick( callback )- this.$nextTick( callback )

案例

<!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>vuejs的nextTick </title><link href="https://cdn.bootcss.com/Swiper/4.5.1/css/swiper.min.css" rel="stylesheet"><script src="https://cdn.bootcss.com/Swiper/4.5.1/js/swiper.min.js"></script><link rel="shortcut icon" href="../img/pikaqiu.jpg" type="image/x-icon" /><!--IE 地址栏前的图标--><link rel="Bookmark" href="../img/pikaqiu.jpg" type="image/x-icon"><!--收藏夹的图标--><style>.swiper-container {width: 600px;height: 300px;}</style>
</head><body><div id="app"><Hello></Hello></div><template id="hello"><div><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" alt=""></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></template>
</body>
<script src="../../lib/vue.js"></script>
<script>// nextTick 表示真是dom渲染结束 Vue.component('Hello', {template: '#hello',data() {return {banners: [],num: 0}},created() {fetch('./mock/banner.json').then(data => data.json()).then(res => {this.banners = res// Vue.nextTick(function() {this.$nextTick(function() { // 推荐/* 好处： 1. 实例化执行一次2. 真实DOM渲染结束之后才执行*/var 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(err => console.log(err))},updated() {console.log('update')// 如果有其他数据改变，那么updated钩子也要出发，那么会有重复实例化问题// var mySwiper = new Swiper('.swiper-container', {//     loop: true, // 循环模式选项//     // 如果需要分页器//     pagination: {//         el: '.swiper-pagination',//     },//     // 如果需要前进后退按钮//     navigation: {//         nextEl: '.swiper-button-next',//         prevEl: '.swiper-button-prev',//     },//     // 如果需要滚动条//     scrollbar: {//         el: '.swiper-scrollbar',//     },// })}})new Vue({el: '#app'})
</script></html>

updated beforeUpdate() Updated() 生命周期-销毁阶段 vue的nextTick@stage3---week2--day4-1相关推荐

《Spring》第六篇 Bean的生命周期 - 销毁
目录一. Bean的生命周期 - 销毁阶段 1. 单例Bean的自杀模式 2. Spring容器关闭时的执行销毁逻辑二. 举例验证 1. 自定义销毁方法 2. 实现DisposableBean或者 ...
Vue08/Vue 生命周期钩子函数( Vue生命周期11个阶段 )应用场景
Vue生命周期 Vue生命周期介绍 Vue生命周期是指Vue实列对象从创建之初到销毁的过程一. Vue生命周期11个阶段创建 beforeCreate //数据初始化前 created ...
Vue 生命周期探索：第四篇：生命周期-销毁流程
文章目录探索学习 Vue 生命周期篇第四篇:生命周期-销毁流程生命周期_销毁流程 1. beforeDestory (销毁前) 2. Teardown watchers,child compon ...
vue生命周期每个阶段可以做什么
解析vue生命周期每个阶段都做什么一.生命周期有哪些在 vue 的创建.使用.销毁过程中,会有许多事件,这些事件就被统称为生命周期函数,也叫作生命周期钩子,有beforeCreate( 创建前 ) ...
软件测试作业1：正确理解原型方法对软件生命周期不同阶段的支持
作业1 1.正确理解原型方法对软件生命周期不同阶段的支持,分别给出:辅助或代替分析阶段:辅助设计阶段:代替分析与设计阶段:代替分析.设计和实现阶段:代替全部开发阶段所对应的开发活动执行时间顺序. 答: ...
数据库系统开发生命周期各个阶段需要获取的数据以及生成的文档
数据库系统开发生命周期各个阶段需要获取的数据以及生成的文档数据库规划系统定义需求收集与分析数据库设计应用程序设计 DBMS选型建立原型系统实现数据转换与加载测试运行维护摘抄自&l ...
maven生命周期所有阶段_Maven构建生命周期，阶段和目标
maven生命周期所有阶段什么是Maven构建生命周期? (What is Maven Build Lifecycle?) When we build a Maven project, it exe ...
MAVEN生命周期、阶段、插件、目标详解
写在前面 MAVEN是一个依赖插件执行的框架,每个任务实际上是由插件完成,插件是在pom.xml中使用plugins标签定义的,每个插件可以包含多个目标. MAVEN定义了三个标准的生命周期(clea ...
测试要素在软件生命周期各阶段的测试目标和内容
测试要素在软件生命周期各阶段的测试目标和内容题目简述选择一个测试要素,以你做过的一个软件作品为例,分别讨论该要素在软件生命周期的需求.设计.编程.测试.安装和维护各阶段的测试目标和内容. 概念测 ...

updated beforeUpdate() Updated() 生命周期-销毁阶段 vue的nextTick@stage3---week2--day4-1

updated 钩子函数

beforeUpdate() 和 Updated()钩子函数

3-生命周期-销毁阶段-外部销毁

生命周期-销毁阶段-内部销毁

总结 - 销毁阶段

swiper-vuejs 的 nextTick

updated beforeUpdate() Updated() 生命周期-销毁阶段 vue的nextTick@stage3---week2--day4-1相关推荐

最新文章

热门文章