详解Vue中的MVVM原理和实现方法
(编辑：jimmy 日期: 2024/12/27 浏览：3 次 )
下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现，这篇文章大家可以学习到：
1.Vue数据双向绑定核心代码模块以及实现原理
2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图
3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新
一、思路整理
实现的流程图：
我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点：
1、实现一个数据监听Observer，对数据对象的所有属性进行监听，数据发生变化可以获取到最新值通知订阅者。
2、实现一个解析器Compile解析页面节点指令，初始化视图。
3、实现一个观察者Watcher，订阅数据变化同时绑定相关更新函数。并且将自己放入观察者集合Dep中。Dep是Observer和Watcher的桥梁，数据改变通知到Dep，然后Dep通知相应的Watcher去更新视图。
二、实现
以下采用ES6的写法，比较简洁，所以大概在300多行代码实现了一个简单的MVVM框架。
1、实现html页面
按Vue的写法在页面定义好一些数据跟指令，引入了两个JS文件。先实例化一个MVue的对象，传入我们的el，data，methods这些参数。待会再看Mvue.js文件是什么？
html
<body>
<div id="app">
<h2>{{person.name}} --- {{person.age}}</h2>
<h3>{{person.fav}}</h3>
<h3>{{person.a.b}}</h3>
<ul>
<li>1</li>
<li>2</li>
<li>3</li>
</ul>
<h3>{{msg}}</h3>
<div v-text="msg"></div>
<div v-text="person.fav"></div>
<div v-html="htmlStr"></div>
<input type="text" v-model="msg">
<button v-on:click="click111">按钮on</button>
<button @click="click111">按钮@</button>
</div>
<script src="/UploadFiles/2021-04-02/MVue.js">
2、实现解析器和观察者
MVue.js
// 先创建一个MVue类,它是一个入口
Class MVue {
construction(options) {
this.$el = options.el
this.$data = options.data
this.$options = options
}
if(this.$el) {
// 1.实现一个数据的观察者 --先看解析器，再看Obeserver
new Observer(this.$data)
// 2.实现一个指令解析器
new Compile(this.$el,this)
}
}
"htmlcode">
// 定义一个观察者
class watcher {
constructor(vm, expre, cb) {
this.vm = vm
this.expre = expre
this.cb =cb
// 把旧值保存起来
this.oldVal = this.getOldVal()
}
// 获取旧值
getOldVal() {
// 将watcher放到targe值中
Dep.target = this
// 获取旧值
const oldVal = compileUtil.getVal(this.expre, this.vm)
// 将target值清空
Dep.target = null
return oldVal
}
// 更新函数
update() {
const newVal = compileUtil.getVal(this.expre, this.vm)
if(newVal !== this.oldVal) {
this.cb(newVal)
}
}
}
"_blank" href="https://github.com/dingxingxing/Storage-of-record-documents/tree/master/Vue/MVVM%E5%AE%9E%E7%8E%B0%E4%BB%A3%E7%A0%81" rel="external nofollow" >源码地址，欢迎clone打桩尝试，还请不要吝啬一个小星星哟！
以上就是详解Vue中的MVVM原理和实现方法的详细内容，更多关于Vue中的MVVM的资料请关注其它相关文章！
上一篇：js实现浏览器打印功能的示例代码
下一篇：详解JavaScript 作用域