Vue框架的MVVM 笔记

Vue是什么

是一套用于构建用户界面的渐进式Javascript框架(MVVM模式)

MV*是什么

对代码进行按照功能划分模块的方式

MVC是什么

MVC(Model、View、Controller)数据、视图、控制器

Model:数据模型,用来存储数据

View:视图界面、用来展示UI界面和响应用户交互,展示数据

Controller:控制器、监听模型数据的改变和控制视图行为、处理用户交互

MVVM模式

MVVM框架更合适在数据操作比较多的场景下,有助于操作数据渲染页面

M(model):数据

V(view):视图

VM(viewmodel):视图模型,用来管理视图和模型的装换

MVVM是MVC的增强版,与MVC没有本质区别,只是代码的位置变动

Vue的数据双向绑定

视图发生改变时模型也会发生改变,模型发生改变时视图也会改变

data如何更新view,因为view更新data其实可以通过事件监听

比如input标签监听input事件可实现

双向绑定的步骤

  1. 实现一个监听器Observer,用来劫持监听所有属性,如有变动通知订阅者

  1. 实现一个订阅者Watcher,可收到属性的变化通知并执行相应的函数,从而更新视图

  1. 实现一个解析器Compile,可以扫描和解析每个节点的相关指令,并根据初始化模板数据以及初始化响应的订阅器

Vue双向绑定的原理

Vue数据的双向绑定是通过数据劫持结合发布者--订阅者模式的方式实现

其核心通过Object.defineProperty()方法设置set和get函数来实现数据劫持

在数据变化时发布消息给订阅者,触发相应的监听回调

数据和视图同步

数据变化,视图变化

视图变化,数据变化

猜你喜欢

转载自blog.csdn.net/m0_67986791/article/details/129021244
今日推荐