小程序生命周期
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实例上数据对象里的值进行操作
-
双向数据绑定