小程序和vue生命周期对比学习

先上图

lifecycle.png

page-lifecycle.png

生命周期流程对比

vue
开始创建vue实例 （时间点）
↓↓↓
初始化事件和生命周期函数（时间段）
—— 当其结束的时候代表beforeCreate生命周期函数的调用，此时虽然数据已经准备完成，但是并没有注入到vue实例中，所以beforeCreate不能获取到data，当然视图层的渲染要更晚。
beforeCreate生命周期函数中没有data和el
↓↓↓
开始注入函数和数据（时间段）
——当前结束的时候，数据注入完成。所以created生命周期函数能够获取到data，但是没有挂载数据到view层
created生命周期函数中有data，没有el
↓↓↓
这个时候就会检测是否存在el的参数，没有就会等待el参数的传递
（不传递就不再进行下一步）
有就会继续检测是否存在template的参数
（在vue实例中如果存在template，就在render函数中使用这个template，没有就使用要挂载的节点的html作为template）
比如，vue实例对象中有：template: "

{{message +'这是在template中的'}}

"就不会使用html部分el内部的html。
------当前结束时就代表beforeMount的调用，因为必须给定el，实例方法才会继续下去，所以le此时是能够获取到
beforeMount生命周期函数中有data，有el
↓↓↓
挂载数据到view层（时间段）
之前可以看出仅仅只是找到这个el参数，并没有对视图层做处理。现在要做的就是挂载数据到view上，创建vue实例下的el，挂载到view上。这个时候vue中的数据就会渲染到html中
------ html中所有的数据完成，代表mounted的调用
↓↓↓ （分支）
当数据改变时，触发beforeUpdata和updata
↓↓↓（分支）
销毁实例（时间段）
首先是beforeDestory
销毁完成的时候
destoryded

本文参考vue部分

小程序
步入某个小程序中（时间点）
↓↓↓
这个流程在于先加载的是目录中的app.js文件中app实例，并且加载app实例中的生命周期。

appjs.png

↓↓↓
页面视图层和逻辑层都同时开始初始化（双线操作，和vue的不同之处）
↓↓↓
逻辑层 onLoad 和onShow（时间段）+ view层初始化完成
------完成后等待view层的通知（通知：view层准备好了，发数据过来）
逻辑层在创建的过程中调用一个页面的两个生命周期函数onLoad 和onshow，即加载和展示，获取需要的数据并且准备将这些数据传递到view层

小程序onload.png

这张图是在onLoad生命周期函数内的断点展示，可以看到，此时的data已经存在

再看下控制台的日志

控制台日志.png

ps：为什么打印出来是1*200？我也不知道。
控制台说得很清楚，首先加载app实例，运行内部的周期函数，注册页面，由路由跳转到首页，利用初始的data更新view，加载内部的周期函数onLoad。

出现一个问题

那么有一个数据我需要调用微信的接口才能获取，所以不能直接在data中初始写入，我应该在onLoad中处理，还是在onShow呢？因为onLoad只是在初始进入这个页面文档时候调用，而onShow早切入这个页面的时候就会调用，所以如果只是初始赋值一次，后续不再需要则选择onLoad，如果是后续切入都需要获取新值则在onShow

↓↓↓
onReady（时间点）
表示当前视图层和逻辑层可以交互
------在接收到通知之后view层获取到逻辑层的数据，并且渲染出来，就会在完成这些操作的时候再发送一个通知，这就是逻辑层onReady的开始信号，表示页面可以开始交互。看完这段描述就应该知道，这个页面只要不重新生成，就不会出现第二次onReady，因为初次渲染只有一次
↓↓↓(分支)
onHide（时间点）
在页面切出的时候触发，并非销毁，而是入栈
------比如路由跳转中navigateTo和tap页切换
↓↓↓（分支）
onUnload(时间点)
在页面销毁的时候触发
------比如路由跳转中redirectTo和navigateBack

个人初学记录，如有错误欢迎指出