小程序/Vue/React 生命周期 分别详解

小程序生命周期

 

 

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html

注册程序：应用生命周期 App({...})

• 用户首次打开小程序，触发 onLaunch（全局只触发一次）

• 小程序初始化完成后，触发onShow方法，监听小程序显示

• 小程序从前台进入后台，触发 onHide方法

• 小程序从后台进入前台显示，触发 onShow方法

• 小程序后台运行一定时间，或系统资源占用过高，会被销毁

前台、后台定义： 当用户点击左上角关闭，或者按了设备 Home 键离开微信，小程序并没有直接销毁，而是进入了后台；当再次进入微信或再次打开小程序，又会从后台进入前台。

只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正的销毁。

 

 

 

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html

注册页面：页面生命周期 Page({…})

• 小程序注册完成后，首次渲染页面触发一次onLoad方法

• 一个页面只会调用一次

• 接收页面路由带过来的参数，可处理接口数据

• 页面显示触发onShow方法

• 页面初次渲染完成时触发onReady方法

• 渲染页面元素和样式，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互

• 页面隐藏/切入后台时触发onHide方法。

• 如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等

• 当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法

• 每次页面切换都会执行一次onShow

• 页面卸载时触发onUnload。如redirectTo或navigateBack到其他页面时

 

应用生命周期影响页面生命周期

• 小程序初始化完成后，页面首次加载触发onLoad，一个页面只会调用一次

• 当小程序进入到后台，先执行 页面onHide 方法再执行 应用onHide 方法

• 当小程序从后台进入到前台，先执行 应用onShow 方法再执行 页面onShow 方法

 

更新视图：

• 将值绑定到 data 对象上

• this.setData({...})

• 单向数据流

 

---

React 生命周期

• getDefaultProps()

• getInitialState()

• componentWillMount()

• render()：first time

• componentDidMount()

• componentWillReceiveProps(nextProps)

• shouldComponentUpdate(nextProps, nexrState)

• componentWillUpdate(nextProps, nexrState)

• render()：after first time，会执行componentDidUpdate、componentWillUnmount

• componentDidUpdate()

• componentWillUnmount()

• 栗子(生命周期执行顺序)：父组件componentWillMount() => 子组件componentWillMount() => 子组件componentDidMount() => 父组件componentDidMount()

 

更新视图：

• 将值绑定到 state 对象上

• this.setState({...})

• 单向数据流

 

---

Vue 生命周期

 

PS：标 * 处表示可以手动介入

• * beforeCreate

• 在绑定监听数据方法以及初始化各个事件之前(仅一次)

• 组件刚被创建，组件属性计算之前，如data属性等

 

• Observer Data 

• 绑定监听数据方法

• 双向数据绑定（Object.defineProperty）：视图到数据（e.target.value），数据到视图（setter、getter）

 

• InitEvents 

• 初始化各个事件：watch methods等

 

• * created

• 在绑定监听数据方法以及初始化各个事件完成之后(仅一次)

• 组件实例创建完成，属性已绑定，如data、methods等，dom还未生成，$el属性还不存在

 

• has 'el' option 

• 判断对象中有没有el属性，例 new Vue({ el: '#app'})，

• 如果有则继续编译，若没有，暂停编译(停止生命周期)，直到vm.$mount(el)被调用再继续编译

 

• has 'template' option

• 判断对象中有没有template属性，例new Vue({ template: '

  '})，

• 如果有，则将其作为模板编译成render函数，如果没有，则把外部html作为模板编译，

• 例：

  外部模板

  , ps: template参数选项的优先级要比外部的HTML高

• 再如果，二者都不存在，则报错

 

• * beforeMount

• 加载挂载dom节点、模板编译完成之前 (仅一次)

• create里的setTimeout可以写在这里

 

• create vm.$el and replace "el" with it 

• 加载dom节点,创建vm.$el来代替"el"

 

• * mounted

• 加载挂载dom节点、模板编译完毕 (仅一次)

 

• * beforeUpdate

• 监听的data对象上的属性发生变化时，在重渲染虚拟dom以及补丁虚拟dom之前(每一次)

 

• Virtual DOM re-render and patch

• 重渲染 虚拟dom 以及补丁虚拟dom

 

• * updated

• 监听的data对象上的属性发生变化时，在重渲染虚拟dom以及补丁虚拟dom之后(每一次)

 

• * activated

• 设置了keep-alive（路由中），那么组件被激活时调用

 

• * deactivated

• 设置了keep-alive（路由中），那么组件被移除时调用

 

• * beforeDestroy

• 当vm.$destroy被调用时，即 摧毁 当前组件中的watchers、child components 和各个事件监听之前

 

• teardown watcher，child components and event listeners

• 摧毁当前组件中的watchers、child components 和各个事件监听

 

• destroyed

• 摧毁当前组件中的watchers、child components 和各个事件监听之后，啥也干不了了

 

 

 

更新视图

• 将值绑定到 data 函数上，再用 v-bind 将值绑定到相应元素上

• 直接用 this.xxx 获取vue实例上数据对象里的值进行操作

• 双向数据绑定

 

历史文章：

1. 手把手教你搭建一个结构清晰易开发易维护的公司的Vue项目，包含axios服务，vuex，公共组件/指令/过滤器/服务等
2. 微信小程序名：你的专属简历（微信可直接搜索出来查看），教你前端如何一个人从零基础开发完整的小程序项目，包括后台可视化数据库
3. koa2+webpack4+React+pm2纯手工架子搭建，SSR项目入门教程以及流程指引详解：手把手教你实现服务端首屏渲染SSR项目