Vue生命周期

最新推荐文章于 2019-09-17 19:21:20 发布

Forever_轩

最新推荐文章于 2019-09-17 19:21:20 发布

阅读量135

点赞数

分类专栏： Vue 前端文章标签：生命周期

本文链接：https://blog.csdn.net/Forever_che/article/details/100097092

版权

前端同时被 2 个专栏收录

16 篇文章 0 订阅

订阅专栏

Vue

7 篇文章 0 订阅

订阅专栏

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’)

mounted

组件挂载结束，也就是已经插入到页面中了

意义：
- 数据可以拿到
- 真实DOM也可以拿到
项目中
- 数据修改，数据请求
- 真实DOM操作【不推荐】
  - 理由：我们要用数据驱动视图
  - 应该做的：第三方实例化【静态数据】

运行中

运行中触发条件是：数据改变

只要数据改变，就会触发这两个钩子函数

beforeUpdate

组件更新前

意义：
- 数据是可以拿到更新后的数据(为在一次的更新准准备工作)
- 也可以拿到更新后的真实DOM (生成Virtual DOM )
项目中：不常用.

update

意义：
- 可以拿到修改后的数据
- 也可以拿到真实DOM
在项目中：
- 可以进行真实DOM操作，但不推荐
- 第三方库动态实例化【动态数据】
内部
- VDOM重新渲染，然后通过render函数解析为VDOM对象模型，在通过Diff进行比对生成patch补丁对象，然后重新渲染为真实DOM
  - 只改变变化的部分，其他部分不改变

销毁

触发条件：组件被删除

外部开关销毁
内部调用$destroy()

beforeDestroy和destroyed

外部销毁
- 通过开关完成(v-if、v-show)
  - DOM被删除了，组件也被删除了
内部销毁
- 通过调用$destroy()来完成
  - DOM没有被删除，但是组件被删除了
  - Dom需要手动删除
项目中如何使用：
- 善后
  - 比如：计时器、滚动事件等

生命周期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 )

 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)]

Forever_轩

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue生命周期

Vue中的生命周期为什么要有生命周期？Vue为了在一个组件的从创建到销毁的一系列过程中添加一些功能，方便我们更好的去控制组件Vue的生命周期分为三个阶段，8个钩子函数初始化##### beforeCreate 组件创建前作用：为整个生命周期做准备工作，初始化事件和自身或是子组件的生命周期做准备意义：数据拿不到真实dom拿不到项目中：不常用c...
复制链接

扫一扫