对vue中的mvvm原理解析和实现
首先你对vue需要有一定的了解，知道mvvm。这样才能更有助于你顺利的完成下面原理的阅读学习和编写
下面由我阿巴阿巴的详细走一遍vue中mvvm原理的实现，这篇文章大家可以学习到：
1.vue数据双向绑定核心代码模块以及实现原理
2.订阅者-发布者模式是如何做到让数据驱动视图、视图驱动数据再驱动视图
3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新
1、思路整理
实现的流程图：
我们要实现一个类mvvm简单版本的vue框架,就需要实现一下几点：
1、实现一个数据监听observer，对数据对象的所有属性进行监听，数据发生变化可以获取到最新值通知订阅者。
2、实现一个解析器compile解析页面节点指令，初始化视图。
3、实现一个观察者watcher，订阅数据变化同时绑定相关更新函数。并且将自己放入观察者集合dep中。dep是observer和watcher的桥梁，数据改变通知到dep，然后dep通知相应的watcher去更新视图。
2、实现
以下采用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="./mvue.js"></script> <script src="./observer.js"></script> <script> let vm = new mvue({ el: '#app', data: { person: { name: '星哥', age: 18, fav: '姑娘', a: { b: '787878' } }, msg: '学习mvvm实现原理', htmlstr: '<h4>大家学的怎么样</h4>', }, methods: { click111() { console.log(this) this.person.name = '学习mvvm' // this.$data.person.name = '学习mvvm' } } }) </script></body>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) }}?// 定义一个compile类解析元素节点和指令class compile { constructor(el,vm) { // 判断el是否是元素节点对象，不是就通过dom获取 this.el = this.iselementnode(el) ? el : document.queryselector(el) this.vm = vm // 1.获取文档碎片对象，放入内存中可以减少页面的回流和重绘 const fragment = this.node2fragment(this.el) // 2.编辑模板 this.compile(fragment) // 3.追加子元素到根元素(还原页面) this.el.appendchild(fragment) } // 将元素插入到文档碎片中 node2fragment(el) { const f = document.createdocumnetfragment(); let firstchild while(firstchild = el.firstchild) { // appendchild // 将已经存在的节点再次插入，那么原来位置的节点自动删除，并在新的位置重新插入。 f.appendchild(firstchild) } // 此处执行完，页面已经没有元素节点了 return f } // 解析模板 compile(frafment) { // 1.获取子节点 conts childnodes = fragment.childnodes; [...childnodes].foreach(child => { if(this.iselementnode(child)) { // 是元素节点 // 编译元素节点 this.compileelement(child) } else { // 文本节点 // 编译文本节点 this.compiletext(child) } // 嵌套子节点进行遍历解析 if(child.childnodes && child.childnodes.length) { this.compule(child) } }) } // 判断是元素节点还是属性节点 iselementnode(node) { // nodetype属性返回 以数字值返回指定节点的节点类型。1-元素节点 2-属性节点 return node.nodetype === 1 } // 编译元素节点 compileelement(node) { // 获得元素属性集合 const attributes = node.attributes [...attributes].foreach(attr => { const {name, value} = attr if(this.is