一、
1 mounted用的最多：向后端发送请求，定时器初始化
2 destroyed：组件销毁--->给组件写一个定时器-->组件销毁，定时器清除
代码演示
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <title>Title</title> </head> <body> <div id="box"> <child v-if="isShow"></child> {{name}} </div> </body> <script> Vue.component('child', { template: ` <div>我是组件的div</div>`, data(){ return { t:null, } }, beforeCreate() { console.log('beforeCreate') }, created() { console.log('created') }, beforeMount() { console.log('beforeMount') }, mounted() { //用的最多，向后端加载数据，创建定时器等 console.log("页面已被vue实例渲染, data, methods已更新"); console.log('mounted') //起一个定时器，每隔三秒，打印一行 this.t = setInterval(function () { console.log('daada') }, 3000) }, beforeUpdate() { console.log('beforeUpdate') }, updated() { console.log('updated') }, beforeDestroy() { console.log('beforeDestroy') }, destroyed() { //组件销毁，清理定时器 clearInterval(this.t) this.t = null console.log('destroyed') }, }) var vm = new Vue({ el: '#box', data: { name:'lili', isShow:true }, beforeUpdate() { console.log('根的---beforeUpdate') }, updated() { console.log('根的---updated') }, }) // setTimeout(function () { // alert(33333) // },3000) //延迟3s钟干什么事 // // // setInterval( // function () { // alert(444) // // },3000 // )//每隔3s钟干什么事 </script> </html>
二、钩子函数应用——swiper轮播图
vue中的钩子函数：monunted和update
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <title>Title</title> <style> .swiper-container { width: 60%; height: 600px; } </style> </head> <body> <div id="box"> <div class="swiper-container"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="data in datalist"> <img :src="data" alt=""> </div> </div> <!-- 如果需要分页器 --> <div class="swiper-pagination"></div> <!-- 如果需要导航按钮 --> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> </div> </body> <script> var vm = new Vue({ el: '#box', data: { datalist: [] }, mounted() { //大坑 setTimeout(() => { //this指的是function这个函数 //使用了箭头函数以后，this指的是上一层 this.datalist = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg'] }, 3000) }, updated() { //只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建 var mySwiper = new Swiper('.swiper-container', { // direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) }, }) </script> </html>
三、
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <script src="https://cdn.bootcdn.net/ajax/libs/vue/2.6.12/vue.min.js"></script> <link rel="stylesheet" href="https://unpkg.com/swiper/swiper-bundle.min.css"> <script src="https://unpkg.com/swiper/swiper-bundle.min.js"></script> <title>Title</title> <style> .swiper-container { width: 60%; height: 600px; } </style> </head> <body> <div id="box"> <swipper> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="data in datalist"> <img :src="data" alt=""> </div> </div> </swipper> <hr> <hr> <br> <swipper :key="datalist2.length"> <div class="swiper-wrapper"> <div class="swiper-slide" v-for="data in datalist2"> {{data}} </div> </div> </swipper> </div> </body> <script> Vue.component('swipper',{ template:` <div class="swiper-container"> <slot></slot> <div class="swiper-pagination"></div> <div class="swiper-button-prev"></div> <div class="swiper-button-next"></div> </div> `, mounted() { var mySwiper = new Swiper('.swiper-container', { // direction: 'vertical', // 垂直切换选项 loop: true, // 循环模式选项 // 如果需要分页器 pagination: { el: '.swiper-pagination', }, // 如果需要前进后退按钮 navigation: { nextEl: '.swiper-button-next', prevEl: '.swiper-button-prev', }, }) } // updated() { // //每次更新都会执行该代码，会耗费资源 // var mySwiper = new Swiper('.swiper-container', { // // direction: 'vertical', // 垂直切换选项 // loop: true, // 循环模式选项 // // // 如果需要分页器 // pagination: { // el: '.swiper-pagination', // }, // // // 如果需要前进后退按钮 // navigation: { // nextEl: '.swiper-button-next', // prevEl: '.swiper-button-prev', // }, // // // }) // }, }) var vm = new Vue({ el: '#box', data: { datalist: [], datalist2: [] }, mounted () { //大坑 setTimeout(() => { //this指的是function这个函数 //使用了箭头函数以后，this指的是上一层。这里举例列表中用了字符串代替 this.datalist = ['https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg', 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1608145297276&di=dd396caeaa0bb6a2a50609a109cd3120&imgtype=0&src=http%3A%2F%2Fattachments.gfan.com%2Fforum%2Fattachments2%2Fday_110915%2F1109151356c0717d7e6a91e985.jpg'] this.datalist2 = ['111','222','333','5555'] }, 3000) }, updated() { //只要js数据发生变化，组件就会执行updated方法，轮播图又会重新创建 }, }) </script> </html>
