微信小程序开发入门与实战 ⑩⑥（纯数据字段及组件生命周期）

本文链接：https://blog.csdn.net/m0_61490399/article/details/127048602

请添加图片描述

@作者 : SYFStrive

@博客首页 : HomePage

📜： 微信小程序

📌：个人社区（欢迎大佬们加入） 👉：社区链接🔗

📌：觉得文章不错可以点点关注 👉：专栏连接🔗

💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞

👉 微信小程序（🔥）

自定义组件 - 纯数据字段

1、什么是纯数据字段

概念：纯数据字段指的是那些不用于界面渲染的 data 字段。
应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。

好处：纯数据字段有助于提升页面更新的性能.

2、使用规则

在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段

代码如 👇

options:{
  pureDataPattern:/^_/
},

/**
 * 组件的属性列表
 */
properties: {

},

/**
 * 组件的初始数据
 */
data: {
    _rgbValue:{
      r:0,
      g:0,
      b:0
    },
    funllColor:'0,0,0'
},

自定义组件 - 组件的生命周期

1、组件全部的生命周期函数

小程序组件可用的全部生命周期如下表所示：

生命周期函数	参数	描述说明
`created`	无	在组件实例刚刚被创建时执行
`attached`	无	在组件实例进入页面节点树时执行
ready	无	在组件在视图层布局完成后执行
moved	无	在组件实例被移动到节点树另一个位置时执行
`detached`	无	在组件实例被从页面节点树移除时执行
error	Object Error	每当组件方法抛出错误时执行

2、组件主要的生命周期函数

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached 。它们各自的特点

如下：

① 组件实例刚被创建好的时候，created 生命周期函数会被触发

此时还不能调用 setData
通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段

② 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发

此时， this.data 已被初始化完毕
这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）

③ 在组件离开页面节点树后， detached 生命周期函数会被触发

退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
此时适合做一些清理性质的工作

3、lifetimes 节点

在小程序组件中，生命周期函数可以直接定义在 Component 构造器的第一级参数中（淘汰），可以在 lifetimes 字段内进行声明（这是推荐的方式，其优先级最高）。

代码如 👇

Component({
  lifetimes:{
    created(){
      console.log("created");
    },
    attached(){
      console.log("attached");
    }
  },
)

最后

本文到这里就结束了,大佬们的支持是我持续更新的最大动力，希望这篇文章能帮到大家💪

相关专栏连接🔗

在这里插入图片描述

下篇文章再见ヾ(￣▽￣)Bye_Bye