生命周期

什么叫做vue的生命周期

一个vue的实例在它创建到销毁的一系列过程,就叫做生命周期

什么是生命周期钩子函数

在vue实例的生命周期中,某个特定时刻会自动触发的函数,就叫做生命周期的钩子函数

生命周期的钩子函数:

  1. beforeCreate 实例创建之前

    1. 拿不到数据与方法
    2. 拿不到真实的dom对象, this.$el
  2. created 实例创建成功

    1. 拿不到真实的dom对象, this.$el
    2. 能够拿到数据与方法
    3. 调用方法,发送异步请求等等。
  3. beforeMount 实例挂载之前

    1. 拿不到真实的dom对象, this.$el
  4. mounted 实例挂载完成

    1. 能够获取到真是的DOM对象,this.$el 有值了
    2. 调用方法,发送异步请求等等。
  5. beforeUpdate 实例更新之前

    1. 获取当前的数据的是话是旧数据
  6. updated 实例更新完成

    1. 真实DOM也更新完成。
  7. beforeDestroy 实例销毁之前

    1. 清除定时器
    2. 清除全局绑定的滚动条事件
    3. 清理工作
  8. destroyed 实例销毁完成

分为三个阶段

  1. 挂载(初始)阶段

    1. beforeCreate 实例创建之前
    2. created 实例创建成功
    3. beforeMount 实例挂载之前
    4. mounted 实例挂载完成
  2. 更新阶段

    1. beforeUpdate 实例更新之前
    2. updated 实例更新完成
  3. 销毁阶段

    1. beforeDestroy 实例销毁之前
    2. destroyed 实例销毁完成

swiper

借助 swiper 插件,实现自己的 swiper 组件

使用步骤

  1. 安装 swiper 模块
  2. 在 Swiper.vue 组件中实现 swiper 模板、swiper 样式、swiper 的逻辑
    PS:

    1. 需要引入 swiper 模块
    2. 需要引入 swiper 样式
  3. 选择某个生命周期钩子函数来做 swiper 的初始化(new Swiper) mounted

问题与解决方法

  1. 如果让 Swiper 组件更加可配置

通过 props 来控制,

  1. 多次调用 Swiper 组件时,发现 小圆点 不更新的问题

原因是 new Swiper() 时传递的是 css 选择器的方式 new Swiper('.swiper-container')。会导致同一个 Swiper 组件 被 初始化了多次。

解决方法:new Swiper(this.$el)

  1. Swiper 轮播图的数据是由调用者来通过 prop 传递下来的。同步的数据传递是没有问题的。但是如果调用者传递的数据是在 ajax 请求到之后再更新的话,就会出现轮播图滑动不了的问题

原因是:ajax 是异步的,等到数据更新时,Swiper 组件已经实例化了。

解决方法是:

  1. 调用者解决
    在调用 Swiper 组件时,通过 v-if 来做控制,等数据拿到之后再去使用 Swiper
  2. 提供者解决

    1. updated 生命周期钩子函数来处理,(数据更新并且真实 DOM 已经更新的时候触发)

    但是 updated 这个生命周期的钩子函数会不管什么数据更新,都会触发。带来的问题就是性能考虑方法

  1. 使用 watch 去监听那个数据。这时发现监听的回调函数执行之后,其实真实DOM还没有更新

    1. setTimeout
    2. this.$nextTick()
Last modification:December 26th, 2019 at 08:58 am
如果觉得我的文章对你有用,请随意赞赏