原生小程序小话题——setData的用法

最新推荐文章于 2024-07-26 17:43:06 发布

原创最新推荐文章于 2024-07-26 17:43:06 发布 · 630 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#小程序 #微信小程序

前端综合专栏收录该内容

40 篇文章

订阅专栏

本文介绍了小程序中数据操作的基本方法，包括通过this.data访问变量、更新数据及删除属性。讨论了this.setData的异步更新和对象数组的操作，并举例说明了如何直接修改数据以及同步到视图。同时，提到了JavaScript的基础知识在小程序数据管理中的应用。

小程序的当中的变量都是通过this这样的方式调用的，比如我们要拿取data中的a变量，那么就应该采用this.data.a这样的写法。

类似的我们的组件当中可能会有外部传入的参数，参数传入之后也是会合并到data之中的，同样的可以通过this.data的方式拿取。

当然this.setData的方式可能会涉及很多的内容，比如到底是不是异步更新状态，如何减少操作之类的，我暂时不是很熟悉，所以只能说一说“用法”，也就是使用方式

设定一个简单的data

data:{
    a:1,
    b:[0,1,1,2],
    c:{
      nameList:["huangfeng","gss","ysd"],
      str："删除我啊"
    }
}

简单的更新数据

this.setData({
        a:4
      }
    )

这个a只是一个key而已，因此也可以写成字符串的形式，如下

this.setData({
        "a":4
      }
      )

带其他变量的更新

this.setData({
        a:this.data.a+this.data.b[1]
      })

当然你也可以使用这种方式进行多个变量的更新

对数组的更新，比如说我这边打算更新b数组的第五个元素

 this.setData({
        "b[5]":9
      })

得到的结果就是

[0,1,1,2,empty,9]

对应对象也可以使用这种方式来进行操作

this.setData({
        "c.nameList[0]":"黄烽"
      })

结果

com-test6.js? [sm]:47 (3) ["黄烽", "gss", "ysd"]

当然，有时候我们可能会对data进行一个比较复杂的操作，这时候就考验到js的基础知识了，当然，就我目前所学是这样的。比如我们在这里要将c对象中的str给删掉

deleteStr(){
      Reflect.deleteProperty(this.data.c,"str")
      console.log(this.data.c);
    }

结果

{nameList: Array(3)}
nameList: (3) ["huangfeng", "gss", "ysd"]
__proto__: Object

我原来还以为所以的数据修改都要通过setData进行呢，但是我又试验了一下，数据层面是可行的，但是反映到页面的上面不行，所以我们这个setData的函数主要还是连接数据层的和视图层，下面我们再换个写法

deleteStr(){
      Reflect.deleteProperty(this.data.c,"str")
      this.setData({
        "c":this.data.c
      })
      console.log(this.data.c);
    }

这样就好了嘛，js层面的数据变动，再由setData更新到视图上，美滋滋。

当然setData还涉及到很多的技巧策略等等，还需要深入学习。