浅谈对Vue.js的MVVM的理解
Vue.js 最近很火 这两天看了代码以及项目 本地运行了一下 感觉主要还是用来做SPA单页应用 谈到整体的架构 肯定要跟MVC做对比 典型的MVC结构 就是 M-----Model 模型 V------View 视图
Vue.js 最近很火 这两天看了代码以及项目 本地运行了一下 感觉主要还是用来做SPA单页应用
谈到整体的架构 肯定要跟MVC做对比
典型的MVC结构 就是 M-----Model 模型
V------View 视图
C------Controller 控制器
现在的vue 采用的是 MVVM 也就是 M----Model 模型
V----View 视图
VM------ViewModel
具体两者有什么区别呢???
下面看一段最简单的vue代码
<div id="app">
<div v-html="message"></div>
</div>
<script>
new Vue({
el:"#app",
data:{
message:'<h1>姑娘这鸡汤有毒哇</h1>'
}
})
</script>
这事一段最基本的vue数据绑定的代码 新建了一个vue对象 绑定了data属性
对于这段的解析就是 当把一个普通的javascript对象传给vue实例来作为他的data选项的时候 vue将便利他的属性
MVC的看法是 界面山的每一个变化都是一个事件 我们只需要针对每个事件来写一堆代码 来吧用户的输入转化成model里的对象
这对代码就是controller
但是MVVM不是这样想的
我给view里面的各种控件也定义一个对应的数据对象,这样,只要修改这个数据对象,view里面显示的内容就自动跟着刷新,而在view 里做了任何操作,这个数据对象也跟着自动更新,这样多美。所以:
ViewModel:就是与界面(view)对应的Model。因为,数据库结构往往是不能直接跟界面控件一一对应上的,所以,需要再定义一个数据对象专门对应view上的控件。而ViewModel的职责就是把model对象封装成可以显示和接受输入的界面数据对象。
至于viewmodel的数据随着view自动刷新,并且同步到model里去,这部分代码可以写成公用的框架,不用程序员自己操心了。
简单的说,ViewModel就是View与Model的连接器,View与Model通过ViewModel实现双向绑定。
更多推荐
所有评论(0)