vue学习-MVVM的实现原理

什么是MVVM

M(model)：model数据层
V(view)：视图层
VM(ViewModel):连接视图和数据的中间件，vue.js就是MVVM中的ViewModel层的实现者。

在MVVM结构中是不允许视图和数据直接通信的只能通过View来通信，而VM就定义了一个观察者来实现。
DOM Listeners：是监听View的数据发生改变就通知Model的数据改变。
Data Bindings：是观察数据的变化，并通知视图对应的内容发生改变。
ViewModel能够观察到数据的变化，并通知视图改变内容依赖的就是DOM Listeners，VM能够监听视图的变化并通知数据的变化依赖的就是 Data Bindings。

至此，Vue.js就是一个MVVM的实现者，他的核心就是DOM监听和数据绑定。

总结

VM实现原理:
VM中内置了一个观察者，这观察者观察两个方面。
1. 观察视图的变化`：当视图数据发生变化，就通知数据进行变化。
2. 观察数据的变化：当数据发生变化，就通知视图发生变化。
MVVM通过VM实现了数据视图的双向绑定。

vue学习-MVVM的实现原理相关推荐

Vue学习笔记——v-show实现原理
v-show例子 <!DOCTYPE html> <html><head><meta charset="utf-8"><tit ...
Vue学习 — Vue响应式原理
一. Object.defineProperty 在学习vue响应式原理之前,必须搞懂 Object.defineProperty. Object.defineProperty(obj, prop, ...
学习vue的双向数据绑定的原理
1. vue数据双向绑定的原理. 2. 实现简单版vue的过程,主要实现{{}}.v-model和事件指令的功能. vue数据双向绑定原理 vue数据双向绑定是通过数据劫持结合发布者-订阅者模式的方式 ...
Vue学习（MVVM、入门练习）-学习笔记
文章目录 Vue学习(MVVM.入门练习)-学习笔记入门实例 Vue学习(MVVM.入门练习)-学习笔记入门实例 <!DOCTYPE html> <html> <he ...
Vue学习笔记--Vue双向绑定实现原理
我们知道Vue可以实现数据双向绑定,Angular和Vue都是采用的MVVM 模式,意思就是当M(模型层)层数据进行修改时,VM层会监测到变化,并且通知V(视图层)层进行相应的修改,反之修改V层则会通 ...
Vue学习笔记01-基础部分
文章目录 VUE笔记-01基础 1.简介 mvvm ES6补充 js高阶函数 let/var const 增强字面量写法 2.基础 2.1.引入 2.2.第一个Vue程序 el挂载点 data数据对象 ...
Vue学习随笔+商城项目【上】
更新日期:2021-02-10 晚 [新年快乐] 附:Vue学习随笔+商城项目[下] 目录(部分) (一)ES6补充 1.1块级作用域 1.1.1 什么是变量作用域 1.1.2 没有块级作用域造成的问 ...
【Vue学习笔记】尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通
尚硅谷Vue2.0+Vue3.0全套教程丨vue.js从入门到精通 1.Vue核心部分 1.1 Vue简介 1.1.1 Vue是什么? Vue是一套用于构建用户界面的渐进式JavaScript框架. ...
Vue学习第一阶段
Vue学习一阶段一.基础部分一.简单了解 let---变量 const---常量 const的使用注意: 注意一:一旦给const修饰的标识符被赋值之后,不能修改 ...
Vue.js 基础语法入门语句 Vue学习笔记 v-model 双向数据绑定
Vue.js 基础语法,入门语句,Vue学习笔记学习网站:https://www.bilibili.com/video/BV15741177Eh vue 的体验响应式:数据一旦改变,视图就会响应改 ...

vue学习-MVVM的实现原理

什么是MVVM

总结

vue学习-MVVM的实现原理相关推荐

最新文章

热门文章