小程序生命周期
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: '<div></div>'}),
-
如果有,则将其作为模板编译成render函数,如果没有,则把外部html作为模板编译,
-
例:<div id="app"><p>外部模板</p></div>, 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实例上数据对象里的值进行操作
-
双向数据绑定