微信小程序单向数据流微信小程序单向数据流

单向数据流：指的是我们先把模板写好，然后把模板和数据（数据可能来自后台）整合到一起形成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 }) } })

效果：