Vue.js和小程序生命周期
Vue.js:页面Page和组件Component生命周期执行的先后顺序
微信小程序:页面Page和组件Component生命周期执行的先后顺序
组件
// components/test-component/test-component.js Component({ /** * 组件生命周期函数-在组件实例刚刚被创建时执行 */ created() { // 注意此时不能调用 setData console.log('Component created'); }, /** * 组件生命周期函数-在组件实例进入页面节点树时执行 */ attached() { console.log('Component attached'); }, /** * 组件生命周期函数-在组件布局完成后执行 */ ready() { console.log('Component ready'); }, /** * 组件生命周期函数-在组件实例被移动到节点树另一个位置时执行 */ moved() { console.log('Component moved'); }, /** * 组件生命周期函数-在组件实例被从页面节点树移除时执行 */ detached() { console.log('Component detached'); }, });
页面
// pages/test-page/test-page.js Page({ /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { console.log('Page onLoad'); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function () { console.log('Page onReady'); }, /** * 生命周期函数--监听页面显示 */ onShow: function () { console.log('Page onShow'); }, /** * 生命周期函数--监听页面隐藏 */ onHide: function () { console.log('Page onHide'); }, /** * 生命周期函数--监听页面卸载 */ onUnload: function () { console.log('Page onUnload'); }, });
页面使用组件
{ "usingComponents": { "test-component": "/components/test-component/test-component" } }
<!--pages/test-page/test-page.wxml--> <test-component></test-component>
控制台输出:
# 显示过程 Component created Component attached Page onLoad Page onShow Component ready Page onReady ## 销毁过程 Page onUnload Component detached
所以,如果页面需要接收到数据(onLoad, onShow),组件需要接收页面传递过来的数据,这时,组件在(ready)阶段才能拿到数据