关于学习Vue和iOS的MVVM异同

520 阅读2分钟

最近在学前端框架Vue.js,Vue.js 是一个提供了MVVM 风格的双向数据绑定的Javascript 库,专注于View 层。它的核心是MVVM 中的VM,也就是ViewModel。 在Vue中,想构造一个VM只需要直接构建一个Vue的实例 假如有一段HTML,给一个input控件声明一个v-model标签,Vue就知道这是一个input所输入的内容就是对应data的message属性。

<div id="app">
<p>{{message}}</p>
<input v-model="message">
</div>
var vm = new Vue({
//vm的挂载点
el: '#app',
data: {
message:"this is a message"
},
...
})

这样,就连接了DOM(View)和data(Model),当输入框改变内容后,data.message的值也会对应改变,而改变data.message也会对应改变输入框的内容。 Vue的双向绑定是基于Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。 当所监听的属性被改变后,会触发setter,从而让监听者收到回调。 写了一些Vue标准格式的文件后,感觉Vue的MVVM和iOS的还是有一点差异的。 首先,在.vue为后缀的文件中,VM的行为一般是在<script></script>中,里面有不可变的property,是作为父节点视图传过来的数据,还会有可变的data,作为该组件自身的变量。以及其他比如:methods类似于Objective-C中类里面的方法,watch类似于KVO,components子组件,以及组件生命周期的方法beforeCreate等。而View也就是html和css的合集。他们全在一个文件内部。而在iOS椎中,普遍把VM抽出来放在一个文件中。 其次,由于iOS中ViewController的特殊性(本身和View耦合),VM的主要功能是将网络请求,和数据计算抽离出来,功能比Vue的要少。所以最好的做法是通过-(void)loadView重写ViewController的view,达到从ViewController中剥离View的目的。然后在ViewController中写上ViewModel的逻辑。