微信小程序(九)_单向数据流

单向数据流：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成HTML代码，然后把这段HTML代码插入到文档流里面。

优点：数据跟踪方便，流向单一，追寻问题比较方便【主要体现：微信小程序】。

缺点：就是写起来不太方便，如果修改UI界面数据需要维护对应的model对象。

图形解说：

 

例子：

想要类似vue中，文本框内容改变时，绑定该数据的地方也随着改变；

界面：

逻辑层：

将界面上的数据再次同步回 数据源上

this.data.foo = e.detail.value  就只是改变数据源，要想改变数据源之后再渲染到页面上，需要this.setData({)}

 

setData 作用:   

1.改变数据源

2.通知框架 数据源变了，需要重新渲染页面

// pages/shuju/shuju.js
Page({

  data: {
    foo:'hello wechat app'
  },
  inputChangeHandle(e){
    // e.target -> 当前文本框
    console.log(e.detail.value)

    // 将界面上的数据再次同步回 数据源上
    // this.data.foo = e.detail.value   就只是改变数据源

    // setData 作用:1.改变数据源
    // 2.通知框架 数据源变了，需要重新渲染页面
    this.setData({ foo:e.detail.value })
  }

})

效果;