「这是我参与2022首次更文挑战的第24天,活动详情查看:2022首次更文挑战」。
MVVM的理解
MVVM 就是 ( Model View ViewModel )
Model:数据模型,从数据库中映射而来
View:视图
ViewModel内部有:
- 监听操作(DOM Listeners) 就是 数据模型 到 视图的事件监听
- 数据绑定(Data Bindings) 就是 数据模型 到 视图的映射
mvvm有两种理解
- 模型转换为视图 就是后端的数据展示成页面
- 视图转换成模型 就是利用事件监听将页面收集到的数据转换成后端的数据
这两个方向都实现的,就称为数据的双向绑定
什么是MVVM思想?
MVVM (Model View ViewModel),它包括 DOM Listenters 和 Data bindings,前者实现了页面与数据的绑定,当数据发生变化的时候会自动渲染页面。后者实现了数据与页面的绑定,当页面操作数据的时候 DOM 和 Model 也会发生相应的变化。
MVVM相对于MVC的优势?
- MVVM 实现了数据与页面的双向绑定,MVC 只实现了 Model 和 View 的单向绑定。
- MVVM 实现了页面业务逻辑和渲染之间的解耦,也实现了数据与视图的解耦,并且可以组件化开发。
VUE是如何体现MVVM思想的?
- 胡子语法,实现了数据与视图的绑定。
- v-on 事件绑定,通过事件操作数据时,v-model 会发生相应的变化。
vue数据劫持的原理
什么是数据劫持
通过上面对Object.defineProperty的介绍,我们不难发现,当我们访问或设置对象的属性的时候,都会触发相对应的函数,然后在这个函数里返回或设置属性的值。既然如此,我们当然可以在触发函数的时候动一些手脚做点我们自己想做的事情,这也就是“劫持”操作。在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作,并“种下”一个监听器,当数据发生变化的时候发出通知。
vue是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发响应的监听回调。
具体步骤
第一步:
需要observer的数据对象进行递归遍历,包括子属性对象的属性,都加上setter和getter这样的话,给这个对象的某个值赋值,就会触发setter,那么久能监听到了数据变化
第二步:
compile解析横板令,将模板中的变量替换成数据.然后初始化渲染页面视图,并将每个令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图
第三步:
Watcher订阅名是 observer和 Compile之间通信的桥梁,主要做的事情是: 1.在自身实例化时往属性订倒器(dep)里面添加自己 2.自身必须有一个 update()方法 3.待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中定的回调,则功成身退
第四步:
MVVM作为数据绑定的入口,合 observer、 Compile和 Watcher三者,通过 Observer来监听自己的model数据変化,通过 Compile来解析编译模板指令,最终利用 Watcher搭起 Observer和 Compile之间的通信标梁,达到数据变化->视图更新新:视图交互变化(Input)->数据mode变更的双向绑定效果。
加油加油!!
努力学习!!