在小程序原生开发里面，我们可以通过 this.setData({}) 来设置操作data数据，而wepy中将该操作进行了封装，我们可以直接使用 this.dataName 来实现data数据的赋值或变更。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<!-- page -->
<view @tap="change">{{title}}</view>

<script>
import wepy from 'wepy';
export default class Index extends wepy.page {
  data = {
    title: '初始化内容'
  };
  methods = {
    change() {
      this.title = '改变内容';
    }
  };
}
</script>

上面的栗子里，我们通过change方法来改变 title 的值 - 可以看到并没有使用 setData 来操作。

重要： 在异步方法里面需要使用 this.$apply() 来启动脏数据检查达到更新data的目的。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
<!-- page -->
<view @tap="change">{{title}}</view>

<script>
import wepy from 'wepy';
export default class Index extends wepy.page {
  data = {
    title: '初始化内容'
  };
  methods = {
    change() {
      setTimeout(() => {
        this.title = '被异步改变了';
        this.$apply();
      }, 1000);
    }
  };
}
</script>

传参优化

在原生开发中要获取参数的话，只能在元素上添加data-属性。而wepy带来的变化则是可以直接在绑定的事件是写入参数：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<view @tap="change({{title}})">{{content}}</view>

<script>
import wepy from 'wepy';
export default class Index extends wepy.page {
  data = {
    title: '标题内容',
    content: ''
  };
  methods = {
    change(txt) {
      this.content = txt;
    }
  };
}
</script>