生命周期

_{手机 手表}

了解卡片生命周期

通过本节，你将学会：

• 卡片生命周期

卡片生命周期

由于卡片通过ViewModel渲染，那么卡片生命周期指的也就是ViewModel的生命周期，包括常见的：onInit, onReady, onShow 在卡片页面创建时触发调用。

onInit()

表示ViewModel的数据已经准备好，可以开始使用页面中的数据

示例如下：

data: {
  // 生命周期的文本列表
  lcList: []
},
onInit () {
  this.lcList.push('onInit')

  console.info(`触发：onInit`)
  console.info(`执行：获取ViewModel的lcList属性：${this.lcList}`)   // 执行：获取ViewModel的lcList属性：onInit
}

onReady()

表示ViewModel的模板已经编译完成，可以开始获取 DOM 节点（如：this.$element(idxxx)）

示例如下：

onReady () {
  this.lcList.push('onReady')

  console.info(`触发：onReady`)
  // 执行：获取模板节点：<div attr={} style={"flexDirection":"column"}>...</div>
  console.info(`执行：获取模板节点`)
}

onShow(), onHide()

APP 中可以同时运行多个页面，但是每次只能显示其中一个页面；这点不同与纯前端开发，浏览器页面中每次只能有一个页面，当前页签打开另一个页面，上个页面就销毁了；不过和 SPA 开发倒有点相似，切换页面但浏览器全局 Context 是共享的

所以页面的切换，就产生了新的事件：页面被切换隐藏时调用 onHide()，页面被切换重新显示时调用 onShow()

示例如下：

onShow () {
  this.lcList.push('onShow')
},
onHide () {
  console.info(`触发：onHide`)
}

onDestroy()

卡片被销毁时调用，所以销毁时应该做一些释放资源的操作。

示例如下：

onDestroy () {
  console.info(`触发：onDestroy`)
  setTimeout(() => {
    // 页面已销毁，不会执行
    console.info(`执行：卡片已被销毁，不会执行`)
  }, 0)
}