小程序 setData 动态 key 的写法

小咪咪 2021-12-12 00:29 595阅读 0赞

> setData 是小程序开发中使用最频繁的接口，也是最容易引发性能问题的接口。
> 
> 本篇文章主要说一说 setData 的正确使用 和 动态 key 的使用。

**目录**

Page.prototype.setData(Object data, Function callback)

\#1 什么时候应该使用 setData 函数？

\#2 常用的 setData 函数使用方法

（1）修改数组的指定项值

（2）修改对象的指定属性值

（3）callback 函数的使用

\#3 动态 key 的写法

--------------------

> ## Page.prototype.setData(Object data, Function callback) ##
> 
> `说明：setData` 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 `this.data` 的值（同步）。
> 
> setData 函数参数说明：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td style="width:100px;"><strong>字段</strong></td> 
>    <td style="width:129px;"><strong>类型</strong></td> 
>    <td style="width:115px;"><strong>必填</strong></td> 
>    <td style="width:505px;"><strong>描述</strong></td> 
>   </tr> 
>   <tr> 
>    <td style="width:100px;">data</td> 
>    <td style="width:129px;">Object</td> 
>    <td style="width:115px;">是</td> 
>    <td style="width:505px;">这次要改变的数据</td> 
>   </tr> 
>   <tr> 
>    <td style="width:100px;">callback</td> 
>    <td style="width:129px;">Function</td> 
>    <td style="width:115px;">否</td> 
>    <td style="width:505px;">setData引起的界面更新渲染完毕后的回调函数</td> 
>   </tr> 
>  </tbody> 
> </table>

## \#1 什么时候应该使用 setData 函数？ ##

1.  有需要更新视图时才使用。若无需修改视图，可直接写 this.data.xxx='xx'；

## \#2 常用的 setData 函数使用方法 ##

先上一段默认的数据

Page({
      data: {
        basic:{
          name:'helang',
          email:'helang.love@qq.com',
          age:24
        },
        hobby: ['爬山', '游泳', '阅读'],
        job:'web前端工程师'
      },
      onLoad: function () {
         
      }
    })

### **（1）修改数组的指定项值** ###

/*
        方法一：先修改数组，后更新视图
        ps:如果数组中有大量值修改时推荐使用该方法
    */
    this.data.hobby[0]="写代码";
    this.setData({
        "hobby": this.data.hobby
    });
    
    /*
        方法二：指定数组项更新
        ps:如果只有某一项发生改变时推荐使用该方法
    */
    this.setData({
        "hobby[0]":'写代码'
    });

### **（2）修改对象的指定属性值** ###

/*
        方法一：先修改对象的值，后更新视图
        ps:如果对象中有大量值修改时推荐使用该方法
    */
    this.data.basic.email="1846492969@qq.com";
    this.setData({
        "basic":this.data.basic
    })
    
    /*
        方法二：指定数组项更新
        ps:如果只有某一项发生改变时推荐使用该方法
    */
    this.setData({
        "basic.email": "1846492969@qq.com"
    })

### **（3）callback 函数的使用** ###

/*
        常规写法
    */
    this.setData({
        "job": "web前端"
    })
    console.log(this.data.job);
    
    /* 
        使用 callback 函数写法。
        如果有需要在更新视图之后运行的代码，推荐使用该方法。功能表现上与 上述 写法一致。
    */
    this.setData({
        "job": "web前端"
    },()=>{
        console.log(this.data.job);
    })

## \#3 动态 key 的写法 ##

有些时候，使用动态 key 的要求可能是因为后端，也有可能是为使代码美观。

小编在遇到该需求时，写下了如下代码：

let key ="basic.name";
    this.setData({
        key: "河浪"
    })

结果悲剧了，没能成功的更新视图上的 \{ \{basic.name\}\} 值，结果是在 this.data 属性中 新增加了一个 key:"河浪" 的值。

NO NO NO，这不是我想要的。但当时也没多想，通过一个个写 key 的方式完成了功能需求。

正确的写法应该是这样的！

let key ="basic.name";
    this.setData({
        [key]: "河浪"
    })

那么，现在用 动态 key 的方式来一波实际点的骚操作吧。

let { keys,values} = {
        keys:["basic.name", "hobby[1]", "job"],
        values:["河浪", "写代码", "web前端"]
    };
    keys.forEach((item,index)=>{  
        this.setData({
            [item]: values[index]
        })
    });

当然，上面的代码只是为了演示动态 key 的使用，如果知道要修改那些 key 的情况下，推荐使用在 setData 函数中传入多个 key。

在文章的结尾附上与本篇文章有关的官方文档地址：

*  setData 函数详解（在文档的末尾处）。\[[传送门][Link 1]\]；
 *  小程序优化建议。[\[传送门\]][Link 2]；

> 作者：[黄河爱浪][Link 3] QQ：1846492969，邮箱：helang.love@qq.com
> 
> 公众号：`web-7258`，本文原创，著作权归作者所有，转载请注明原链接及出处。
> 
> 更多精彩文章，请扫下方二维码关注我的公众号
> 
> ![20190512094840637.jpg][]

[Link 1]: https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html
[Link 2]: https://developers.weixin.qq.com/miniprogram/dev/framework/performance/tips.html
[Link 3]: https://blog.csdn.net/u013350495
[20190512094840637.jpg]: /images/20211211/096f80dcaf9d4663b6ee733be44bd7ad.png