前端（九）——探索微信小程序、Vue、React和Uniapp生命周期（上）-阿里云开发者社区

微信小程序、Vue、React和Uniapp的基本定义和应用领域

微信小程序：

微信小程序是一种基于微信平台的应用程序，可以在微信内部直接使用，无需下载安装。它采用前端技术构建，包括HTML、CSS和JavaScript，并且可以调用微信提供的API进行功能扩展。微信小程序适用于各种场景，如电商购物、社交娱乐、生活服务等。

Vue：

Vue是一种流行的JavaScript前端框架，用于构建用户界面。它采用渐进式开发的方式，具有简洁易学、灵活高效、组件化开发等特点。Vue提供了数据驱动的视图组件，通过响应式的数据绑定和组件系统，使开发者能够更轻松地构建交互性强、复杂度较高的Web应用。

React：

React是由Facebook开发的JavaScript库，用于构建用户界面。它采用组件化的开发模式，将页面拆分为独立的组件，每个组件都有自己的状态和生命周期。通过虚拟DOM技术和高效的diff算法，React能够快速更新页面并提高性能。React广泛应用于构建单页应用、复杂的用户界面和移动应用。

Uniapp：

Uniapp是一个基于Vue.js的全端开发框架，可以同时开发多个平台的应用，包括微信小程序、H5、App和各大主流应用市场。使用Uniapp，可以通过一套代码在多个平台上实现应用的开发和发布，提高开发效率和跨平台兼容性。Uniapp适用于需要在多个平台上发布应用程序的开发者。

应用领域：

微信小程序：适用于开发微信生态系统中的应用，如电商购物、社交娱乐、生活服务等。

Vue：适用于构建各种类型的Web应用，从简单的静态网页到复杂的单页应用都可以使用Vue进行开发。

React：适用于开发单页应用、复杂用户界面和移动应用，特别适合需要高性能、交互复杂的应用场景。

Uniapp：适用于需要在多个平台上发布应用程序的开发者，可以节省开发成本和提高开发效率。

微信小程序生命周期

生命周期概述

生命周期特点：

小程序的生命周期包括App、Page和Component三个层级，每个层级都有自己的生命周期函数。
App层级的生命周期涵盖了整个小程序的运行过程，包括小程序的启动、后台进入前台、前台进入后台等。
Page层级的生命周期关注于页面的加载、显示、交互和卸载等过程。
Component层级的生命周期与自定义组件的使用相关，涵盖了自定义组件的创建、更新和销毁等。

作用：

生命周期函数提供了不同阶段执行代码的机会，可以在适当的时候处理数据加载、初始化操作、页面渲染、事件监听等。
通过生命周期函数，开发者可以在特定时刻执行相应的业务逻辑，并控制页面的展示和行为。
生命周期也与用户体验密切相关，可以通过合理地利用生命周期函数来提高小程序的性能和响应速度。
在页面跳转、数据传递等场景下，生命周期函数还可以起到数据传递和状态管理的作用。

页面生命周期

onPageLoad：

作用：在页面加载时触发，一般用于进行初始化操作。
注意事项：仅在页面第一次加载时触发，在页面切换时不会再次触发。

onShow：

作用：在页面显示时触发，一般用于处理页面展示前的数据加载和更新。
注意事项：在页面切换、后台进入前台、模态框关闭等情况下都会触发。

onReady：

作用：在页面初次渲染完成时触发，表示页面已经准备好了可以和用户进行交互。
注意事项：仅在页面初次渲染完成时触发，之后页面更新不会再触发该函数。

onHide：

作用：在页面隐藏时触发，一般用于处理页面切换/离开时的资源释放和数据保存操作。
注意事项：在页面切换、后台进入前台、模态框打开等情况下都会触发。

onUnload：

作用：在页面卸载时触发，一般用于清理页面相关的定时器、事件监听等资源。
注意事项：页面卸载时会触发，包括页面跳转、返回上一页等操作。

应用生命周期

onLaunch：

作用：在小程序初始化完成时触发，一般用于进行全局的初始化操作。
注意事项：该函数仅在小程序初始化完成时触发，只执行一次。

onHide：

作用：在小程序进入后台时触发，一般用于处理小程序进入后台时的数据保存和资源释放。
注意事项：当用户点击设备 Home 键、切换到其他小程序或锁屏时会触发该函数。

onError：

作用：在小程序发生脚本错误或 API 调用失败时触发，用于捕获和处理错误信息。
注意事项：一般用于监控和上报小程序的错误信息，可以在该函数中进行错误日志记录等操作。

onShow：

作用：在小程序进入前台时触发，一般用于处理小程序进入前台时的数据更新和页面刷新。
注意事项：当小程序从后台进入前台时会触发该函数，可以进行页面数据的更新和渲染。

组件和API的生命周期钩子

created：

作用：在组件实例刚刚被创建时触发，一般用于进行组件相关的初始数据设置和一些初始化操作。
注意事项：此时组件数据还未准备好，无法与视图进行交互。

attached：

作用：在组件被添加到页面节点树中时触发，一般用于组件的一些进一步初始化操作。
注意事项：此时组件已经可以与视图进行交互，但尚未渲染到页面上。

ready：

作用：在组件布局完成后触发，表示组件已经准备好可以与用户进行交互。
注意事项：此时组件已经渲染到页面上，可以监听事件、更新数据等。

API 的生命周期钩子函数是在使用第三方 API 或库时，提供的一些函数接口，用于在特定阶段执行自定义逻辑。以下是对 API 生命周期钩子函数的使用场景和注意事项的小结：

使用场景：

初始化：在 API 被调用之前执行一些初始化操作，例如设置默认参数、鉴权等。

请求发送前：在每次请求发送之前执行一些预处理操作，例如请求参数的校验、加密等。

请求发送后：在请求发送成功后执行一些后续处理操作，例如从响应中提取数据、进行异常处理等。

结束/关闭：在所有请求结束或 API 调用完成后执行一些清理操作，例如释放资源、关闭连接等。

注意事项：

准确选择钩子函数：根据需要选择合适的生命周期钩子函数，以确保在适当的时机执行特定逻辑。

避免过度使用：过度使用生命周期钩子函数可能导致代码复杂性增加，应谨慎选择和使用。

异常处理：在生命周期钩子函数中应包含适当的异常处理，以避免程序崩溃或产生未处理的错误。

性能优化：生命周期钩子函数会对程序性能产生影响，应注意避免在生命周期钩子函数中执行过多耗时操作，以免影响用户体验。

Vue生命周期

生命周期钩子函数

beforeCreate：

在实例被创建之初，完成数据观测和事件初始化之前被调用。
此时组件的实例已经被创建，但尚未完成数据响应式绑定，也没有 DOM 节点和组件实例的引用。
使用场景：可以在此阶段执行一些初始化操作，例如全局配置的读取、插件的安装等。

created：

在实例创建完成后被调用，此时实例已完成数据观测、属性和方法的运算，但尚未挂载到页面上。
可以访问组件实例的 data、methods、props 等属性，但无法访问到 DOM 元素。
使用场景：常用于进行异步数据获取、初始化非响应式数据等操作，例如发起网络请求或获取用户位置信息。

mounted：

在实例挂载到页面之后被调用，此时组件的 DOM 已经渲染完毕。
可以通过 this.$el 访问组件的根 DOM 元素，并可以直接操作 DOM。
使用场景：常用于进行 DOM 操作、注册事件监听器等，例如绑定图表库、初始化第三方插件等。

updated：

当组件的 VNode 更新后被调用，但不保证所有子组件也都已更新。
可以访问到更新前后的状态，可以与之前的数据进行比较，执行额外的操作。
使用场景：常用于监测数据变化并做出相应反应，例如根据变化请求更新数据、重新渲染组件等。

destroyed：

在组件实例销毁之前调用，此时组件实例已解除了数据绑定，监听事件被移除，子组件也都被销毁。
使用场景：可以在此阶段执行一些清理操作，例如取消网络请求、清除定时器、释放资源等。

生命周期函数的触发顺序是固定的，依次是 beforeCreate、created、mounted、updated 和 destroyed。当组件在页面上被销毁时，会依次触发 beforeDestroy 和 destroyed 生命周期函数。

响应式监听与生命周期关联

对于Vue的响应式数据变化，Vue通过使用data选项来定义组件的响应式数据。当这些数据发生变化时，Vue能够自动追踪并更新相关的DOM，从而保持视图与数据的同步。这种响应式的特性使得我们能够方便地更新和管理数据，同时减少手动操作DOM的工作量。

生命周期钩子函数是在组件实例的不同生命周期阶段被调用的函数。它们提供了一些特定的时间点，让我们可以在组件的不同生命周期中执行额外的任务。这些钩子函数包括：

created: 在组件实例被创建后调用。此时组件实例已完成配置过程，但尚未挂载到DOM。可以在这个阶段进行一些初始化逻辑，例如发送网络请求获取数据，并将数据赋值给组件中的响应式数据。
mounted: 在组件挂载到DOM后调用。此时组件已经完成挂载，可以进行DOM操作、集成第三方库等任务。例如，在这个钩子函数中，你可以初始化一些图表或其他可视化组件，并将数据渲染到相应的元素中。
updated: 在组件更新后调用。当组件的响应式数据发生变化时，会重新渲染组件。在这个钩子函数中，你可以根据数据的变化执行额外的操作。例如，可以重新计算一些属性或调用其他方法来处理数据依赖关系。
beforeDestroy: 在组件销毁之前调用。在这个钩子函数中，你可以执行一些清理工作，例如取消网络请求、清除定时器、解绑事件监听器等。这可以帮助避免内存泄漏和资源浪费问题。

使用created钩子函数进行数据初始化：

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    // 发送网络请求获取用户数据
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.log(error);
      });
  },
};

使用mounted钩子函数进行第三方库的初始化和操作：

export default {
  mounted() {
    // 初始化图表库并将数据渲染到图表中
    const chart = new Chart('#myChart', {
      // 配置选项
    });
    chart.render(this.data);
  },
};

使用updated钩子函数处理数据变化后的操作：

export default {
  data() {
    return {
      total: 0,
      items: [],
    };
  },
  updated() {
    // 计算总数
    this.total = this.items.length;
  },
};

使用beforeDestroy钩子函数进行资源清理

export default {
  data() {
    return {
      timer: null,
    };
  },
  mounted() {
    // 在组件销毁前清除定时器
    this.timer = setInterval(() => {
      // 定时任务逻辑
    }, 1000);
  },
  beforeDestroy() {
    clearInterval(this.timer); // 清除定时器
  },
};

生命周期的钩子函数在实际开发中的应用

数据获取

export default {
  data() {
    return {
      users: [],
    };
  },
  created() {
    // 发送网络请求获取用户列表
    axios.get('/api/users')
      .then(response => {
        this.users = response.data;
      })
      .catch(error => {
        console.error(error);
      });
  },
};