MVVM 相关概念
1） MVVM的典型特点是有四个概念：Model、View、ViewModel、binder。 MVVM可以是单向绑定，也可以是双向绑定，甚至可以不绑定
2） Binder：声明性数据和命令，存在于 ViewModel 中，允许 ViewModel 和 Model 自动或手动通信，下一节“React Correspondence 中的MVVM”有例子。
3） MVVM本质上就是M-V-C-VM，在MVC的基础上增加了一层VM，但是C变弱了，并入了M的概念，VM用于分离V和M，并且让用户避免了直接操作V层的DOM带来的繁琐和低效，MVVM让开发更高效，结构更清晰，代码复用性增加。
4）在不同的GUI（图形用户界面）上显示时，Model、Controller、View-Model可以复用，只需替换View层即可。
5） 在不同类型的 UI（用户界面）上显示时，Model 和 Controller 可以复用，只需替换 View-Model 和 View 层即可。例如：假设我们正在为盲人开发一个应用程序，那么也许我们需要考虑使用扬声器代替显示器作为输出设备，并使用麦克风作为输入设备，那么我们只需要替换上面的 View-Model以 Audio-Model 作为语音模型，将 V(iew) 层替换为 Audio 层，用于播放语音和接收语音输入。
6） 个人来说，在一个基于MVVM框架的项目中，无论是双向数据绑定还是单向数据绑定，你在开发中真正要面对的是ViewModel和M(odel) layer 之前的通信，因为 V(iew) 和 ViewModel 层之间的映射和通信是由框架自动完成的前端mvvm框架，
MVVM 四层结构
1） M(odel)层：模型，定义数据结构。
2） C（控制器）层：实现业务逻辑，增删改查数据。在MVVM模式下，C层一般算在M层中。 （只有在理想的双向绑定模式下，Controller才会完全消失，这种理想状态一般是不存在的）
3） ViewModel层：顾名思义就是视图View的模型、映射和显示逻辑（如if for等，非业务逻辑），binder也在这一层。 ViewModel 是一组基于视图开发的模型。如果你的应用是针对盲人的，你也可以基于Audio，AudioModel开发一套模型。
4） V(iew) 层：通过特定的 GUI 显示 ViewModel，并在 GUI 控件上绑定视图交互事件。 V(iew)一般由MVVM框架在浏览器中自动生成。
React中的MVVM对应关系
1） M(odel)：对应组件的方法或生命周期函数中实现的业务逻辑以及this.state中保存的本地数据，如果React集成redux+react-redux，那么组件组件中的业务逻辑和本地数据可以完全解耦，单独存储为M层，比如Reducer和Action中的业务逻辑。
2） V(iew)-M(odel)：对应组件中的JSX，本质上是Virtual DOM的语法糖。 React负责维护Virtual DOM并对其进行diff操作，React-dom会将Virtual DOM渲染成浏览器中的真实DOM
3）视图：浏览器中对应框架根据虚拟DOM（不需要我们写）和我们写的CSS生成的真实DOM
4）Binder：对应JSX中的命令和绑定数据，如className={this.props.xxx}、{this.props.xxx}等。
MVVM的双绑定和单绑定的区别
1）一般只有UI表单控件有双向数据绑定，非UI表单控件只有单向数据绑定。
2）单向数据绑定的意思是：M的变化可以自动更新到ViewModel，但是ViewModel的变化需要手动更新到M（通过给表单控件设置事件监听器）
3）双向数据绑定指的是：M的变化可以自动更新到ViewModel，ViewModel的变化也可以自动更新到M
4） 双向绑定 = 单向绑定 + UI 事件监听。双向和单向只是框架封装程度的区别，本质上两者是可以相互转换的。
5） 优缺点：在表单交互较多的情况下，单向数据绑定的优点是数据更容易跟踪、管理和维护，缺点是代码量大比较冗长，而且双向数据绑定的优缺点与单向绑定相反。
三个框架的异同
1）三个框架都是数据驱动的框架
2） Vue 和 Angular 是双向数据绑定； react 是单向数据绑定。 React 似乎也使用了 Object.defineProperty 来监控数据，但它并没有进一步将表单控件的事件封装到 v-model 中
3） Vuex和Redux是单项数据绑定，即M的变化可以自动更新到V前端mvvm框架，但是V的变化必须手动触发事件更新到M。这个单项数据绑定让数据更易于跟踪管理和维护。
4）待续……
Vue双向绑定原理
1） Vue的双向数据绑定通过Object.defineProperty的get/set来监控M层数据。当数据发生变化时，VM层绑定的数据自动更新，当用户发生变化时，VM层表单控件的数据通过v-model自动更新到M层（v-model是对表单控件的事件）
简洁示例：
2）我们已经知道Vue是双向数据绑定（通过v-model），而Vuex是单向数据绑定，所以问题是，在一个基于Vue+ Vuex的项目中，数据在 Vuex 中如果不允许 Vue 的 v-model 改变，会报错。解决方案有以下三种：
还是用v-model，数据不是放到vuex里面，而是放在组件本身的data属性里面
还是使用v-model，但是value不再是Vuex中的数据，而是组件本身的一个computed(getter/setter)或者watch，通过computed或者watch里面的回调提交数据变化（提交）到 Vuex
组件模板：
{{newName}}
组件 Vue 实例：
computed: {
newName: {
get () {
return this.$store.state.name
},
set (val) {
this.$store.commit('changeName', val) //当newName 值发生改变时，提交一个mutation：changeName，用于改变store中的name/
}
}
}
变异：
changeName (state, val) {
state.name = val
}
不使用v-model，通过UI事件监听器触发回调，然后手动提交数据变化到Vuex
3）Vue 的双向数据绑定和 Vue 的 prop 单项数据流是两个不同的概念。数据绑定的前提是有数据流，但数据流不一定有数据绑定。 prop 的单项数据流意味着：prop 可以将父组件的数据传给子组件，子组件不能直接修改数据，也不能流回父组件（当然要感谢 Vue 的对所有数据使用 Object.defineProperty) ，所以 prop 传递的数据是绑定的，即一旦父组件中的数据发生变化，子组件中的数据也会发生变化）
文章来源：segmentfault，作者：解药。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件至：sean.li#ucloud.cn（邮箱中#请改为@）进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容。
后台-系统设置-扩展变量-移动广告-正文底部
