[vue]3-Vue的生命周期

最新推荐文章于 2023-11-17 09:00:00 发布

给你翅膀

最新推荐文章于 2023-11-17 09:00:00 发布

阅读量97

点赞数

分类专栏： vue学习笔记文章标签： vue

本文链接：https://blog.csdn.net/Pure_wu/article/details/115608454

版权

vue学习笔记专栏收录该内容

9 篇文章 0 订阅

订阅专栏

先放一幅图

在这里插入图片描述

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>

给你翅膀

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
[vue]3-Vue的生命周期

先放一幅图beforcreate、created<body> <div id="app"> <hehe></hehe> </div> <template id="hehe"> <div class = 'test'> <p ref='p'>{{num}}</p> </div> </template><scrip
复制链接

扫一扫