详解Vue中的MVVM原理和实现方法

2024-12-15 17:32:03

下面由我阿巴阿巴的详细走一遍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="./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.isDirective(name)) { // 判断属性是不是以v-开头的指令
        // 解析指令（v-mode v-text v-on:click 等...）
        const [, dirctive] = name.split('-')
        const [dirName, eventName] = dirctive.split(':')
        // 初始化视图 将数据渲染到视图上
        compileUtil[dirName](node, value, this.vm, eventName)

        // 删除有指令的标签上的属性
        node.removeAttribute('v-' + dirctive)
      } else if (this.isEventName(name)) { //判断属性是不是以@开头的指令
        // 解析指令
        let [, eventName] = name.split('@')
        compileUtil['on'](node,val,this.vm, eventName)

        // 删除有指令的标签上的属性
        node.removeAttribute('@' + eventName)
      } else if(this.isBindName(name)) { //判断属性是不是以:开头的指令
        // 解析指令
        let [, attrName] = name.split(':')
        compileUtil['bind'](node,val,this.vm, attrName)

        // 删除有指令的标签上的属性
        node.removeAttribute(':' + attrName)
      }
    })
  }

  // 编译文本节点
  compileText(node) {
    const content = node.textContent
    if(/\{\{(.+?)\}\}/.test(content)) {
      compileUtil['text'](node, content, this.vm)
    }
  }

  // 判断属性是不是指令
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  // 判断属性是不是以@开头的事件指令
  isEventName(attrName) {
    return attrName.startsWith('@')
  }
  // 判断属性是不是以:开头的事件指令
  isBindName(attrName) {
    return attrName.startsWith(':')
  }
}


// 定义一个对象，针对不同指令执行不同操作
const compileUtil = {
  // 解析参数(包含嵌套参数解析)，获取其对应的值
  getVal(expre, vm) {
    return expre.split('.').reduce((data, currentVal) => {
      return data[currentVal]
    }, vm.$data)
  },
  // 获取当前节点内参数对应的值
  getgetContentVal(expre,vm) {
    return expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {
      return this.getVal(arges[1], vm)
    })
  },
  // 设置新值
  setVal(expre, vm, inputVal) {
    return expre.split('.').reduce((data, currentVal) => {
      return data[currentVal] = inputVal
    }, vm.$data)
  },

  // 指令解析：v-test
  test(node, expre, vm) {
    let value;
    if(expre.indexOf('{{') !== -1) {
      // 正则匹配{{}}里的内容
      value = expre.replace(/\{\{(.+?)\}\}/g, (...arges) => {

        // new watcher这里相关的先可以不看，等后面讲解写到观察者再回头看。这里是绑定观察者实现   的效果是通过改变数据会触发视图，即数据=》视图。
        // 没有new watcher 不影响视图初始化(页面参数的替换渲染)。
        // 订阅数据变化，绑定更新函数。
        new watcher(vm, arges[1], () => {
          // 确保 {{person.name}}----{{person.fav}} 不会因为一个参数变化都被成新值
          this.updater.textUpdater(node, this.getgetContentVal(expre,vm))
        })

        return this.getVal(arges[1],vm)
      })
    } else {
      // 同上，先不看
      // 数据=》视图
      new watcher(vm, expre, (newVal) => {
      // 找不到{}说明是test指令，所以当前节点只有一个参数变化，直接用回调函数传入的新值
    this.updater.textUpdater(node, newVal)
     })

      value = this.getVal(expre,vm)
    }

    // 将数据替换，更新到视图上
    this.updater.textUpdater(node,value)
  },
  //指令解析： v-html
  html(node, expre, vm) {
    const value = this.getVal(expre, vm)

    // 同上，先不看
    // 绑定观察者 数据=》视图
    new watcher(vm, expre (newVal) => {
      this.updater.htmlUpdater(node, newVal)
    })

    // 将数据替换，更新到视图上
    this.updater.htmlUpdater(node, newVal)
  },
  // 指令解析：v-mode
  model(node,expre, vm) {
    const value = this.getVal(expre, vm)

    // 同上，先不看
    // 绑定观察者 数据=》视图
    new watcher(vm, expre, (newVal) => {
      this.updater.modelUpdater(node, newVal)
    })

    // input框 视图=》数据=》视图
    node.addEventListener('input', (e) => {
      //设置新值 - 将input值赋值到v-model绑定的参数上
      this.setVal(expre, vm, e.traget.value)
    })
    // 将数据替换，更新到视图上
    this.updater.modelUpdater(node, value)
  },
  // 指令解析： v-on
  on(node, expre, vm, eventName) {
    // 或者指令绑定的事件函数
    let fn = vm.$option.methods && vm.$options.methods[expre]
    // 监听函数并调用
    node.addEventListener(eventName,fn.bind(vm),false)
  },
  // 指令解析： v-bind
  bind(node, expre, vm, attrName) {
    const value = this.getVal(expre,vm)
    this.updater.bindUpdate(node, attrName, value)
  }

// updater对象，管理不同指令对应的更新方法
updater: {
    // v-text指令对应更新方法
    textUpdater(node, value) {
      node.textContent = value
    },
    // v-html指令对应更新方法
    htmlUpdater(node, value) {
      node.innerHTML = value
    },
    // v-model指令对应更新方法
    modelUpdater(node,value) {
      node.value = value
    },
    // v-bind指令对应更新方法
    bindUpdate(node, attrName, value) {
      node[attrName] = value
    }
  },
}

3、实现数据劫持监听

我们有了数据监听，还需要一个观察者可以触发更新视图。因为需要数据改变才能触发更新，所有还需要一个桥梁Dep收集所有观察者(观察者集合)，连接Observer和Watcher。数据改变通知Dep，Dep通知相应的观察者进行视图更新。

Observer.js

// 定义一个观察者
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)
    }
  }
}


// 定义一个观察者集合
class Dep {
  constructor() {
    this.subs = []
  }
  // 收集观察者
  addSub(watcher) {
    this.subs.push(watcher)
  }
  //通知观察者去更新
  notify() {
    this.subs.forEach(w => w.update())
  }
}



// 定义一个Observer类通过gettr，setter实现数据的监听绑定
class Observer {
  constructor(data) {
    this.observer(data)
  }

  // 定义函数解析data,实现数据劫持
  observer (data) {
    if(data && typeof data === 'object') {
      // 是对象遍历对象写入getter，setter方法
      Reflect.ownKeys(data).forEach(key => {
        this.defineReactive(data, key, data[key]);
      })
    }
  }

  // 数据劫持方法
  defineReactive(obj,key, value) {
    // 递归遍历
    this.observer(data)
    // 实例化一个dep对象
    const dep = new Dep()
    // 通过ES5的API实现数据劫持
    Object.defineProperty(obj, key, {
      enumerable: true,
      configurable: false,
      get() {
        // 当读当前值的时候，会触发。
        // 订阅数据变化时，往Dep中添加观察者
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set: (newValue) => {
        // 对新数据进行劫持监听
        this.observer(newValue)
        if(newValue !== value) {
          value = newValue
        }
        // 告诉dep通知变化
        dep.notify()
      }
    })
  }

}

三、总结

其实复杂的地方有三点：

1、指令解析的各种操作有点复杂饶人，其中包含DOM的基本操作和一些ES中的API使用。但是你静下心去读去想，肯定是能理顺的。

2、数据劫持中Dep的理解，一是收集观察者的集合，二是连接Observer和watcher的桥梁。

3、观察者是什么时候进行绑定的？又是如何工作实现了数据驱动视图，视图驱动数据驱动视图的。

在gitHub上有上述源码地址，欢迎clone打桩尝试，还请不要吝啬一个小星星哟！

以上就是详解Vue中的MVVM原理和实现方法的详细内容，更多关于Vue中的MVVM的资料请关注我们其它相关文章！

JS组件系列之MVVM组件构建自己的Vue组件

正文前言:转眼距离上篇 JS组件系列--又一款MVVM组件:Vue(一:30分钟搞定前端增删改查) 已有好几个月了,今天打算将它捡起来,发现好久不用,Vue相关技术点都生疏不少.经过这几个月的时间,Vue的发展也是异常迅猛,不过这好像和博主都没什么太大的关系,博主还是老老实实研究自己的技术吧.技术之路还很长,且行且研究吧. 一.为什么组件很重要前两天,看到一篇关于汇总vue开源项目的文章,资源非常丰富,不得不感叹开源社区的强大.随便点进去看了几个UI组件,基本都不是原生的html用法,如
Vue原理剖析实现双向绑定MVVM

本文能帮你做什么? 1.了解vue的双向数据绑定原理以及核心代码模块 2.缓解好奇心的同时了解如何实现双向绑定为了便于说明原理与实现,本文相关代码主要摘自vue源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理.数据的循环依赖等,也难免存在一些问题,欢迎大家指正.不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读vue源码的时候会更有帮助< 本文所有相关代码均在github上面可找到 https://github.com/DMQ/mvvm 相信大家对mvvm双向绑定应该都不
浅析vue中的MVVM实现原理

现成MVVM 菜单教程 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title> <script src="https://unpkg.com/vue/dist/vue.js"></script> </head> <bod
对类Vue的MVVM前端库的实现代码

MVVM (ModelView ViewModel)是一种基于MVC的设计,开发人员在HTML上写一些Bindings,利用一些指令绑定,就能在Model和ViewModel保持不变的情况下,很方便的将UI设计与业务逻辑分离,从而大大的减少繁琐的DOM操作. 关于实现MVVM,网上实在是太多了,本文为个人总结,结合源码以及一些别人的实现关于双向绑定 •vue 数据劫持 + 订阅 - 发布 •ng 脏值检查 •backbone.js 订阅-发布(这个没有使用过,并不是主流的用法) 双向绑定,从最
JS组件系列之MVVM组件 vue 30分钟搞定前端增删改查

正文前言:关于Vue框架,好几个月之前就听说过,了解一项新技术之后,总是处于观望状态,一直在犹豫要不要系统学习下.正好最近有点空,就去官网了解了下,看上去还不错的一个组件,就抽空研究了下.最近园子里vue也确实挺火,各种入门博文眼花缭乱,博主也不敢说写得多好,就当是个学习笔记,有兴趣的可以看看. 一.MVVM大比拼关于MVVM,原来在介绍knockout.js的时候有过讲解,目前市面上比较火的MVVM框架也是一抓一大把,比如常见的有Knockout.js.Vue.js.AvalonJS.An
详解Vue中的MVVM原理和实现方法

下面由我阿巴阿巴的详细走一遍Vue中MVVM原理的实现,这篇文章大家可以学习到: 1.Vue数据双向绑定核心代码模块以及实现原理 2.订阅者-发布者模式是如何做到让数据驱动视图.视图驱动数据再驱动视图 3.如何对元素节点上的指令进行解析并且关联订阅者实现视图更新一.思路整理实现的流程图: 我们要实现一个类MVVM简单版本的Vue框架,就需要实现一下几点: 1.实现一个数据监听Observer,对数据对象的所有属性进行监听,数据发生变化可以获取到最新值通知订阅者. 2.实现一个解析器Compi
详解Vue中$refs和$nextTick的使用方法

目录 1.$refs简介 $refs获取DOM元素 $refs获取组件对象 2.$nextTick基本使用 vue异步更新DOM 利用$nextTick解决以上问题 $nextTick使用场景 1.$refs简介 $refs是vue提供的获取真实dom的方法. $refs获取DOM元素 [使用步骤]: 在原生DOM元素上添加ref属性利用this.$refs获取原生的DOM元素 [代码演示]: <template> <div> <h1>获取原生的DOM元素</h1
详解vue 中使用 AJAX获取数据的方法

在VUE开发时,数据可以使用jquery和vue-resource来获取数据.在获取数据时,一定需要给一个数据初始值. 看下例: <script type="text/javascript"> new Vue({ el:'#app', data:{data:""}, created:function(){ var url="json.jsp"; var _self=this; $.get(url,function(data){ _se
详解Vue中watch对象内属性的方法

vue提供了watch方法,用于监听实例内data数据的变化.通常写法是: new Vue({ data: { count: 10, blog:{ title:'my-blog', categories:[] } }, watch: { count: function (newval, oldVal) { console.log(`new: %s, old: %s`, newVal, oldVal); } } }) 上述情况里data中的count属性可以直接监听,但是如果需要监听的数据是对象内
详解vue中v-model和v-bind绑定数据的异同

vue的模板采用DOM模板,也就是说它的模板可以当做DOM节点运行,在浏览器下不报错,绑定数据有三种方式,一种是插值,也就是{{name}}的形式,一种是v-bind,还有一种是v-model.{{name}}的形式比较好理解,就是以文本的形式和实例data中对应的属性进行绑定.比如: var app = new Vue({ el: '#app', template: '<div @click="toggleName">{{name}}</div>', data
详解Vue中的watch和computed

前言对于使用Vue的前端而言,watch.computed和methods三个属性相信是不陌生的,是日常开发中经常使用的属性.但是对于它们的区别及使用场景,又是否清楚,本文我将跟大家一起通过源码来分析这三者的背后实现原理,更进一步地理解它们所代表的含义. 在继续阅读本文之前,希望你已经具备了一定的Vue使用经验,如果想学习Vue相关知识,请移步至官网. Watch 我们先来找到watch的初始化的代码,/src/core/instance/state.js export function in
详解vue 组件的实现原理

组件机制的设计,可以让开发者把一个复杂的应用分割成一个个功能独立组件,降低开发的难度的同时,也提供了极好的复用性和可维护性.本文我们一起从源码的角度,了解一下组件的底层实现原理. 组件注册时做了什么? 在Vue中使用组件,要做的第一步就是注册.Vue提供了全局注册和局部注册两种方式. 全局注册方式如下: Vue.component('my-component-name', { /* ... */ }) 局部注册方式如下: var ComponentA = { /* ... */ } new Vu
详解vue中v-for的key唯一性

1. DOM Diff 要想真正了解 key 属性的存在意义,还真得从 DOM Diff 说起,并不需要深入了解 DOM Diff 的原理,而是仅仅需要知道 DOM Diff 的工作过程即可. Vue 和 React 都采用了运用虚拟 DOM 的方式减少浏览器不必要的渲染.由于 Vue 和 React 采用的都是 v = render( m ) 的方式渲染视图的,当 model 数据发生变化时,视图更新的方式就是重新 render DOM 元素.但是有时候我们只是改变了一个组件中的某一个 div
实例详解vue中的代理proxy

目录问题复习一下跨域的解决方案原理场景扩展几个常用的devServer配置扩展几个vue/cli3的配置问题我们本地调试一般都是 npm run serve,然后打开本机ip:8080(localhost:8080)对吧,这时候我们要调接口调试,后端的接口的地址可能在测试环境,也可能是自己电脑的 ip,总之不是你的 lcoalhost:8080,那么你调接口就会产生跨域,那么怎么办呢?就需要proxy出场了复习一下跨域的解决方案 jsonp cors Node中间件代理(两次
详解JSP 中Spring工作原理及其作用

详解JSP 中Spring工作原理及其作用 1.springmvc请所有的请求都提交给DispatcherServlet,它会委托应用系统的其他模块负责负责对请求进行真正的处理工作. 2.DispatcherServlet查询一个或多个HandlerMapping,找到处理请求的Controller. 3.DispatcherServlet请请求提交到目标Controller 4.Controller进行业务逻辑处理后,会返回一个ModelAndView 5.Dispathcher查询一个或多个

详解Vue中的MVVM原理和实现方法

相关推荐

随机推荐