@作者 : SYFStrive

 

@博客首页 : HomePage

📜： 微信小程序

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

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

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

👉 微信小程序（🔥）

自定义组件 - 纯数据字段

    1、什么是纯数据字段

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

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

  options:{
    pureDataPattern:/^_/
  },

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

  },

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

    2、使用规则

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

代码如 👇

options:{
  pureDataPattern:/^_/
},

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

},

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

    3、使用纯数据字段改造数据监听器案例

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

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

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

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

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

在小程序组件中，最重要的生命周期函数有 3 个，分别是 created、attached、detached 。它们各自的特点
如下：
① 组件实例刚被创建好的时候，created 生命周期函数会被触发

1. 此时还不能调用 setData
2. 通常在这个生命周期函数中，只应该用于给组件的 this 添加一些自定义的属性字段
   ② 在组件完全初始化完毕、进入页面节点树后， attached 生命周期函数会被触发
3. 此时， this.data 已被初始化完毕
4. 这个生命周期很有用，绝大多数初始化的工作可以在这个时机进行（例如发请求获取初始数据）
   ③ 在组件离开页面节点树后， detached 生命周期函数会被触发
5. 退出一个页面时，会触发页面内每个自定义组件的 detached 生命周期函数
6. 此时适合做一些清理性质的工作

    3、lifetimes 节点

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

代码如 👇

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

最后

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

 

                 相关专栏连接🔗

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