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

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

效果：

版权声明：本文为CSDN博主「Anna·」的原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接及本声明。 原文链接：https://blog.csdn.net/weixin_42220533/article/details/83586903