使用vue.js,vue,js
MVVM旨在利用WPF的数据绑定功能，通过删除视图层几乎所有的GUI代码(代码隐藏)，可以更好地促进视图层的开发与模式其余部分的分离。本文主要介绍Vue.js中关于MVVM的相关信息，供大家参考。
目录
理解MVVM原理脏查机制：数据劫持相似点实现MVVM总结
MVVM的理解
MVVM分解后称为模型-视图-视图模型，由视图、视图模型和模型组成。视图层表示视图和模板，负责将数据模型转化为UI并显示出来。模型层表示模型和数据，可以在模型层定义数据修改和操作的业务逻辑。视图模型层连接模型和视图。
在MVVM的框架下，视图层和模型层并不直接相关，而是通过视图模型层进行交互。视图层通过双向数据绑定连接视图层和模型层，使视图层和模型层的同步完全自动化。所以开发者只需要关注业务逻辑，不需要手动操作DOM。复杂的数据状态维护交由MVVM统一管理。MVVM在Vue.js中的体现：
MVVM的原理
在不同的框架中，MVVM实现的原理是不同的：
脏检查机制：
Angular.js是采用的脏检查机制。当有事情发生时(比如输入)，Angular.js会检查新的数据结构和之前的数据结构是否有变化，以决定是否更新视图。
数据劫持
Vue.js的实现劫持了数据(模型)。当数据发生变化时，数据会通过劫持时绑定的方法更新视图。
相同点
脏检查机制和数据劫持有很多相似之处。例如，它们都有三个步骤：
模板解析数据绑定模板和数据
实现MVVM
！声明文档类型
html lang=en
头
meta charset=UTF-8
标题双向数据绑定/标题
/头
身体
div id=应用程序
输入类型=text v-model=text
{{ text }}
/div
脚本
函数obj，VM {
Object.keys(obj)。forEach(函数(键){
defineReactive(vm，key，obj[key])；
});
}
函数defineReactive (obj，key，val) {
var Dep=new Dep()；
Object.defineProperty(obj，key，{
get: function () {
if(dep . target)dep . add sub(dep . target)；
返回值
},
set: function (newVal) {
if (newVal===val)返回
val=newVal
dep . notify()；
}
});
}
function nodeToFragment(节点，虚拟机){
var flag=document . createdocumentfragment()；
var子；
while (child=node.firstChild) {
编译(子，VM)；
flag.appendChild(子)；
}
返回标志；
}
函数编译(节点，虚拟机){
var reg=/\{\{(。*)\}\}/;
//节点类型是元素
if (node.nodeType===1) {
var attr=node.attributes
//解析属性
for(var I=0；i attr.lengthi ) {
if (attr[i]。nodeName==v-model) {
var name=attr[i]。nodeValue//获取v模型绑定的属性名
node.addEventListener(input ，函数(e) {
//给对应的数据属性赋值，然后触发该属性的set方法
VM[name]=e . target . value；
});
node . value=VM[name]；//将数据的值赋给该节点
node . remove attribute(“v-model”)；
}
}
新观察器(虚拟机、节点、名称、“输入”)；
}
//节点类型是文本
if (node.nodeType===3) {
if (reg.test(node.nodeValue)) {
var name=RegExp .$1;//获取匹配到的字符串
名字=名字。trim()；
新观察器（虚拟机，节点，名称，文本);
}
}
}
函数观察器（虚拟机、节点、名称、节点类型){
//这个为看守人函数
Dep.target=这
//控制台。日志(这个)；
this.name=name
this.node=节点
this.vm=vm
this.nodeType=节点类型
这个。update()；
Dep.target=null
}
Watcher.prototype={
更新：函数(){
这个。get()；
if (this.nodeType==text) {
这个。节点。nodevalue=this。价值；
}
if (this.nodeType==input) {
这个。节点。价值=这个。价值；
}
},
//获取抗病毒药物中的属性值
get: function () {
这个。价值=这个。VM【这个。姓名]；//触发相应属性的得到
}
}
函数Dep () {
this.subs=[]
}
部门原型={
addSub: function(sub) {
这个。潜艇。推(分)；
},
通知：函数(){
这个。潜艇。foreach(function(sub){
sub update()；
});
}
};
功能Vue(选项){
这个。数据=选项。数据；
var data=this.data
观察（数据，这个);
var id=options.el
var DOM=nodeToFragment(document。getelementbyid(id)，this)；
//编译完成后，将数字正射影像图返回到应用中
document.getElementById(id).appendChild(DOM)；
}
var vm=new Vue({
埃尔："应用程序",
数据：{
文本："你好，世界"
}
});
/脚本
/body
/html
总结
到此这篇关于vue。j中视图模型的文章就介绍到这了，更多相关vue。j中视图模型内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。