[uniapp生命周期]详细讲解uniapp中那些属于vue生命周期,那些属于uniapp独有的生命周期,以及这中间的区别 相关的内容和api 代码注释

目录

• • [1. Vue.js生命周期函数](#1. Vue.js生命周期函数)
  • 2.Vue生命周期函数代码
  • • beforeCreate
    • created
    • beforeMount
    • mounted
    • beforeUpdate
    • updated
    • beforeDestroy
    • destroyed
    • [nextTick](#nextTick)
    • [forceUpdate](#forceUpdate)
    • [destroy](#destroy)
  • [3. UniApp独有的生命周期函数](#3. UniApp独有的生命周期函数)
  • • onLaunch
    • onShow
    • onHide
    • onError
  • 4.总结

在UniApp中，除了Vue.js的生命周期函数外，还有一些UniApp独有的生命周期函数。下面是它们的详细解释及其区别：

1. Vue.js生命周期函数

• beforeCreate：在实例初始化之后，数据观测和事件配置之前被调用。
• created：实例已经创建完成之后被调用。在这一步，实例已完成数据观测、属性和方法的运算，同时也可以进行 DOM 操作。但是，挂载阶段还没开始，$el 属性目前不可见。
• beforeMount：在挂载开始之前被调用。相关的渲染函数首次被调用。
• mounted：el 被新创建的 vm. el 替换，并挂载到实例上去之后调用该钩子。如果根实例挂载到了一个文档内的元素上，当 mounted 被调用时 vm.el 也在文档内。
• beforeUpdate：数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。这里适合在更新之前访问现有 DOM，比如手动移除已添加的事件监听器。
• updated：由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子。调用时，组件 DOM 已经更新，所以可以执行依赖于 DOM 的操作。
• beforeDestroy：实例销毁之前调用。在这一步，实例仍然完全可用。
• destroyed：实例销毁之后调用。该钩子被调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。

Uniapp是基于Vue.js的跨平台开发框架，因此其生命周期与Vue.js的生命周期类似。以下是uniapp中常用的生命周期函数和相关API的详细讲解和代码注释：

2.Vue生命周期函数代码

beforeCreate

在实例初始化之后，数据观测和事件配置之前被调用。

export default {
  beforeCreate() {
    console.log('beforeCreate')
  }
}

created

实例创建完成后被立即调用。

export default {
  created() {
    console.log('created')
  }
}

beforeMount

在挂载开始之前被调用：相关的 render 函数首次被调用。

export default {
  beforeMount() {
    console.log('beforeMount')
  }
}

mounted

实例挂载后调用，此时组件 DOM 已经渲染出来了。

export default {
  mounted() {
    console.log('mounted')
  }
}

beforeUpdate

数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前。

export default {
  beforeUpdate() {
    console.log('beforeUpdate')
  }
}

updated

由于数据更改导致的虚拟 DOM 重新渲染和打补丁完成之后调用。

export default {
  updated() {
    console.log('updated')
  }
}

beforeDestroy

实例销毁之前调用。

export default {
  beforeDestroy() {
    console.log('beforeDestroy')
  }
}

destroyed

实例销毁后调用。

export default {
  destroyed() {
    console.log('destroyed')
  }
}

$nextTick

在下次 DOM 更新循环结束之后执行延迟回调。在修改数据之后立即使用这个方法，获取更新后的 DOM。

this.$nextTick(() => {
  // DOM 更新完成后执行的回调函数
})

$forceUpdate

迫使 Vue 实例重新渲染。

this.$forceUpdate()

$destroy

完全销毁一个实例。清理它与其他实例的连接，解绑它的全部指令及事件监听器。

this.$destroy()

3. UniApp独有的生命周期函数

onLaunch

• onLaunch：当小程序初始化完成时，会触发 onLaunch（全局只触发一次）。参数中可以获取到小程序的启动参数，如路径、场景值等。

onShow

• onShow：当小程序启动，或从后台进入前台显示，会触发 onShow。参数中可以获取到小程序的启动参数，如路径、场景值等。

onHide

• onHide：当小程序从前台进入后台，会触发 onHide。

onError

• onError：当小程序发生脚本错误或 API 调用失败时，会触发 onError 并带上错误信息。

这些生命周期函数的区别在于它们被触发的时机和作用范围不同。Vue.js的生命周期函数主要是针对组件的，而UniApp独有的生命周期函数是针对整个小程序的。其中，onLaunch和onShow是非常重要的生命周期函数，可以用来初始化一些全局变量或执行一些全局操作。

代码注释如下：

export default {
  beforeCreate() {
    // 在实例初始化之后，数据观测和事件配置之前被调用
  },
  created() {
    // 实例已经创建完成之后被调用
  },
  beforeMount() {
    // 在挂载开始之前被调用
  },
  mounted() {
    // el 被新创建的 vm.$el 替换，并挂载到实例上去之后调用该钩子
  },
  beforeUpdate() {
    // 数据更新时调用，发生在虚拟 DOM 重新渲染和打补丁之前
  },
  updated() {
    // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  },
  beforeDestroy() {
    // 实例销毁之前调用
  },
  destroyed() {
    // 实例销毁之后调用
  },
  onLaunch(options) {
    // 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
  },
  onShow(options) {
    // 当小程序启动，或从后台进入前台显示，会触发 onShow
  },
  onHide() {
    // 当小程序从前台进入后台，会触发 onHide
  },
  onError(error) {
    // 当小程序发生脚本错误或 API 调用失败时，会触发 onError 并带上错误信息
  }
}

4.总结

Uniapp的生命周期说白了== >Vue的生命周期函数+uniapp自定义的生命周期函数

但是在开发中 大都是基于vue的组件思路 所以常用的还是 Vue的生命周期