Uniapp：页面的生命周期

在开发跨平台应用时，Uniapp 是一个非常好用的框架。了解页面的生命周期，可以帮助我们更好地控制页面的行为和提升用户体验。

生命周期的概念

生命周期是指页面从创建、渲染到销毁的整个过程。在每个阶段，页面都会触发相应的函数，我们可以在这些函数中执行相应的操作。

在 Uniapp 中，页面的生命周期可以分为以下几个阶段：

beforeCreate: 在页面实例被创建之前触发，这个阶段无法访问到数据和方法。
created: 在页面实例被创建完毕后触发，可以在这个阶段进行数据的初始化操作。
beforeMount: 在页面挂载之前触发，可以在这个阶段进行一些准备工作。
mounted: 在页面挂载后触发，可以在这里进行数据的请求和渲染。
beforeUpdate: 在页面更新之前触发，可以在这里进行一些准备工作。
updated: 在页面更新之后触发，可以在这里进行数据的更新和重新渲染。
beforeDestroy: 在页面销毁之前触发，可以在这里进行一些清理工作。
destroyed: 在页面销毁后触发，可以在这里进行一些资源的释放和回收。

生命周期的应用场景

生命周期函数可以用于各种场景，比如数据的初始化、请求数据、页面的渲染、DOM 的操作、事件的监听等。下面我们来看一些具体的例子。

数据初始化

在 created 阶段，我们可以进行数据的初始化操作。比如，我们可以在这个阶段从本地存储中读取数据，并将其赋给页面的数据模型。

created() {
  // 从本地存储中读取数据
  const data = uni.getStorageSync('data');
  // 将数据赋给页面的数据模型
  this.data = data;
}

请求数据

在 mounted 阶段，我们可以进行数据的请求和渲染。比如，我们可以在这个阶段通过网络请求获取数据，并将其展示在页面上。

mounted() {
  // 发起网络请求
  uni.request({
    url: 'https://api.example.com/data',
    success: (res) => {
      // 将响应数据赋给页面的数据模型
      this.data = res.data;
    }
  });
}

DOM 操作

在 updated 阶段，我们可以进行 DOM 的操作。比如，我们可以在这个阶段获取某个元素的高度，并将其赋给页面的数据模型。

updated() {
  // 获取元素的高度
  const height = uni.createSelectorQuery().select('.element').boundingClientRect((rect) => {
    // 将元素的高度赋给页面的数据模型
    this.height = rect.height;
  }).exec();
}

事件监听

在 mounted 阶段，我们可以进行事件的监听。比如，我们可以在这个阶段监听某个按钮的点击事件，并执行相应的操作。

mounted() {
  // 监听按钮的点击事件
  uni.$on('button-click', () => {
    // 执行操作
    console.log('Button clicked');
  });
}

总结

了解页面的生命周期，对于开发跨平台应用非常重要。通过钩子函数，我们可以在不同的阶段执行相应的操作，从而控制页面的行为。希望本文能对大家学习 Uniapp 的页面生命周期有所帮助！

本文来自极简博客，作者：冬日暖阳，转载请注明原文链接：Uniapp：页面的生命周期