小程序生命周期与vue生命周期的关系、区别

生命周期

目录

生命周期

1、什么是生命周期？

2、生命周期的分类

3、什么是生命周期函数

5、应用的生命周期函数

6、页面的生命周期函数

数据响应

---

✅作者简介：

             我是痴心阿文，你们的学友哥，今天给大家分享小程序生命周期与vue生命周期的关系、区别！
📃个人主页：痴心阿文的博客_CSDN博客-TypeScript.js,笔记,CSS领域博主
🔥本文前言：小程序生命周期与vue生命周期的关系、区别
💖如果觉得博主的文章有帮到你的话，请👍支持一下博主哦🤞  

 

🍉🍉🍉1、什么是生命周期？

小程序启动，表示生命周期的开始。
小程序关闭，表示生命周期的结束。
中间小程序运行的过程，就是小程序的生命周期。

🍉🍉​​​​​​​🍉2、生命周期的分类

在小程序中，声明中求分为两类，分别是：
应用生命周期，特指小程序从启动-运行-销毁的过程。
页面生命周期，特指小程序中，每个页面的加载-渲染-销毁的过程。

🍉🍉​​​​​​​🍉3、什么是生命周期函数

生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。
生命周期函数的作用：允许程序员咋特定的时间点，执行某些二特定的操作。
注意：生命周期强调的是时间段，生命周期函数强调的是时间点。

🍉🍉​​​​​​​🍉4、应用的生命周期函数

小程序的应用生命周期函数需要在app.js中进行声明。

🍉🍉​​​​​​​🍉5、页面的生命周期函数

小程序的页面生命周期函数需要在页面的.js文件中进行声明。

小程序自定义组件	Vue/uni-app	描述
created	onServiceCreated	小程序的created触发时，可以访问子组件信息，而Vue的created访问不到，故需uni-app框架映射到其它时机（onServiceCreated）执行
attached	onServiceAttached	同上
ready	mounted	Vue 生命周期
moved	-	Vue中不存在该钩子，暂不支持转换
detached	destroyed	Vue 生命周期

小程序的pageLifetimes（组件所在页面的生命周期）在Vue中是没有的，需要映射为uni-app封装的页面生命周期：

小程序自定义组件	uni-app	描述
ready	onPageShow	页面被展示时执行
hide	onPageHide	页面被隐藏时执行
resize	onPageResize	页面尺寸变化时执行

数据响应

Vue和小程序都有一套数据绑定系统，但机制不同，比如在Vue体系下，数据赋值是这样的：

this.a = 1
复制代码

但在小程序中，数据赋值方式则是这样的：

this.setData({
	a:1
}) //响应式
this.data.a = 2 //非响应式