简陋版 MVVM 原理实现

最新推荐文章于 2023-10-20 13:02:22 发布
最新推荐文章于 2023-10-20 13:02:22 发布
阅读量280 收藏
点赞数
分类专栏： JavaScript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qq_43477721/article/details/109826689
版权
笔者也是第一次学习这个原理，听不懂的东西还挺多的，所以代码能用的就用，视频文章尾部自取。

在这里插入图片描述

视频中所讲的代码，大致如下

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app">
    <input type="text" v-model="school.name">
    <div class="">{{school.name}}</div>
    <div class="">{{school.age}}</div>
    <!-- 如果数据不变化，视图就不会刷新 -->
    {{getNewName}}
    <!--  -->
    <ul>
      <li>1</li>
      <li>1</li>
    </ul>
    <button v-on:click="change">update</button>
    <div class="" v-html="message"></div>
  </div>
  <script src="./mvvm.js"></script>
  <script>
    let vm = new Vue({
      el: '#app',
      data: {
        school: {
          name: 'vue',
          age: 10
        },
        message: '<h1>JS</h1>'
      },
      computed: {
        getNewName() {
          return this.school.name + '3.0'
        }
      },
      methods: {
        change() {
          this.school.name = 'react'
        }
      },
    });
  </script>
</body>
</html>

mvvm.js

// 观察者（发布订阅）
class Dep {
  constructor() {
    // 存放所有的 watcher
    this.subs = []
  }
  // 订阅
  addSub(watcher) {
    // 添加 watcher
    this.subs.push(watcher)
  }
  // 发布
  notify() {
    this.subs.forEach(watcher => watcher.update())
  }
}

// new Watcher
class Watcher {
  constructor(vm, expr, cb) {
    this.vm = vm
    this.expr = expr
    this.cb = cb
    // 默认存放旧值
    this.oldValue = this.get()
  }

  get() {
    Dep.target = this // 先把自己放在 this 上
    // 取值 把这个观察者和 数据关联起来
    let value = CompileUtil.getVal(this.vm, this.expr)
    Dep.target = null
    return value
  }
  // 更新操作 数据变化后，会调用观察者的 update 方法
  update() {
    let newVal = CompileUtil.getVal(this.vm, this.expr)
    if (newVal !== this.oldValue) {
      this.cb(newVal)
    }
  }
}
// vm.$watch(vm, 'school.name', (newVal) => {

// })

// 实现数据劫持功能
class Observer{
  constructor(data) {
    this.observer(data)
  }
  observer(data) {
    // 如果是对象，才进行观察
    if (data && typeof data === 'object') {
      // 如果是对象
      for (let key in data) {
        this.defineReactive(data, key, data[key])
      }
    }
  }
  defineReactive(obj, key, value) {
    this.observer(value)
    let dep = new Dep(value) // 给每一个属性，都加上一个具有发布订阅的功能
    Object.defineProperty(obj, key, {
      get() {
        // 创建 watcher时，会取到相对应的内容，并且把 watcher 放到全局上
        Dep.target && dep.addSub(Dep.target)
        return value
      },
      set:(newVal) => {
        if (newVal != value) {
          this.observer(newVal)
          value = newVal
          dep.notify()
        }
      }
    })
  }
}
// 基类 调度

class Compiler {
  constructor(el, vm) {
    // 判断 el 属性， 是不是一个元素， 如果不是元素， 进行获取
    this.el = this.isElementNode(el) ? el : document.querySelector(el)
    // 将当前节点的元素，获取之后存放到内存中

    this.vm = vm
    let fragment = this.node2fragment(this.el)

    // 将节点中的内容进行替换

    // 编译模板 用数据编译
    this.compile(fragment)

    // 把页面重新渲染到页面中
    this.el.appendChild(fragment)
  }
  isDirective(attrName) {
    return attrName.startsWith('v-')
  }
  // 编译元素
  compileElement(node) {
    let attributes = node.attributes;
    [...attributes].forEach(attr => {
      // console.log(attr)
      let { name, value: expr } = attr
      // console.log(name, value)
      if (this.isDirective(name)) {
        // console.log(node, 'element')
        let [, directive] = name.split('-')
        let [directiveName, eventName] = directive.split(':')
        // 需要调用不同的指令来处理
        CompileUtil[directiveName](node, expr, this.vm, eventName)
      }
    })
  }
  // 编译文本 包含 {{}}
  compileText(node) {
    let content = node.textContent
    // console.log(content, 'text')
    if (/\{\{(.+?)\}\}/.test(content)) {
      console.log(node, 'text')
      // 找到所有文本
      CompileUtil['text'](node, content, this.vm)
    }
  }
  // 编译内存中的 dom 节点
  compile(node) {
    let childNodes = node.childNodes;
    // 类数组，转为数组
    [...childNodes].forEach(child => {
      if (this.isElementNode(child)) {
        this.compileElement(child)
        // 如果是元素的话，继续遍历子节点
        // 递归调用
        this.compile(child)
      } else {
        this.compileText(child)
      }
    })
    // console.log(childNodes)
  }
  node2fragment(node) {
    // 创建一个文档碎片
    let fragment = document.createDocumentFragment()
    let firstChild
    while (firstChild = node.firstChild) {
      // console.log(firstChild)
      // appChild 具有移动性。从页面中获取，存放到内存中，页面的元素就会少一个
      fragment.appendChild(firstChild)
    }
    return fragment
  }
  // 判断是否是元素节点
  isElementNode(node) {
    return node.nodeType === 1
  }
}

CompileUtil = {
  // 根据表达式取到对应的数据
  getVal(vm, expr) {
    // vm.$data
    return expr.split('.').reduce((data, current) => {
      return data[current]
    }, vm.$data)
  },
  setValue(vm, expr, value) {
    expr.split('.').reduce((data, current, index, arr) => {
      if (index === arr.length - 1) {
        return data[current] = value
      }
      return data[current]
    }, vm.$data)
  },
  // 解析 v-model 指令
  model(node, expr, vm) {
    // node 是节点 expr 是表达式 vm 是当前实例，
    let fn = this.updater['modelUpdater']
    new Watcher(vm, expr, (newVal) => {
      // 给输入框加一个观察者，如果数据更新了，会触发此方法
      // 会各输入框赋予心智
      fn(node, newVal)
    })
    node.addEventListener('input', (e) => {
      let value = e.target.value // 获取用户输入的内容
      this.setValue(vm, expr, value)
    })
    let value = this.getVal(vm, expr)
    fn(node, value)
  },
  html(node, expr, vm) {
    let fn = this.updater['htmlUpdater']
    new Watcher(vm, expr, (newVal) => {
      fn(node, newVal)
    })
    let value = this.getVal(vm, expr)
    fn(node, value)
  },
  getContentValue(vm, expr) {
    // 遍历表达式，将内容重新替换成完整的内容，返还回去
    return expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
      return this.getVal(vm, args[1])
    })
  },
  on(node, expr, vm, eventName) {
    // v-on:click="change"
    node.addEventListener(eventName, (e) => {
      vm[expr].call(vm, e) // this change
    })
  },
  text(node, expr, vm) {
    // expr => {{a}} {{b}} {{c}}
    let fn = this.updater['textUpdater']
    let content = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {
      // 给表达式 {{}} 都加上观察者
      new Watcher(vm, args[1], () => {
        fn(node, this.getContentValue(vm, expr)) // 返回一个全的字符串
      })
      return this.getVal(vm, args[1])
    })
    fn(node, content)
  },
  updater: {
    // 把数据插入到节点中
    modelUpdater(node, value) {
      node.value = value
    },
    htmlUpdater(node, value) {
      node.innerHTML = value
    },
    textUpdater(node, value) {
      node.textContent = value
    }
  }
}

class Vue {
  constructor(optinos) {
    // this.$el $data $options
    this.$el = optinos.el
    this.$data = optinos.data
    let computed = optinos.computed
    let methods = optinos.methods
    // 如果根元素 存在 进行编译模板
    if (this.$el) {
      // 把数据全部转化为 Object.defineProperty 来定义
      new Observer(this.$data)

      // 把数据获取操作 vm 上的取值操作都代理到 vm.$data

      // 
      for(let key in computed) {
        Object.defineProperty(this.$data, key, {
          get:() => {
            return computed[key].call(this)
          }
        })
      }

      for(let key in methods) {
        Object.defineProperty(this, key, {
          get() {
            return methods[key]
          }
        })
      }

      this.proxyVm(this.$data)

      console.log(this.$data)
      new Compiler(this.$el, this)
    }
  }
  proxyVm(data) {
    for(let key in data) {
      // 取值可以通过 vm 取到相对应的值
      Object.defineProperty(this, key, {
        get() {
          // 进行转化操作
          return data[key]
        },
        set(newVal) {
          data[key] = newVal
        }
      })
    }
  }
}

链接：https://pan.baidu.com/s/1tHs97yC21DaObE58PwtJcg
提取码：50mn

淘淘是只狗
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
vue双向绑定原理
qq_23858785的博客
11-07 3202
MVVM是Model-View-ViewModel的简写，即模型-视图-视图模型，MVVM是双向、自动的，也就是数据发生变化自动同步视图，视图发生变化自动同步数据。
Vue基础知识总结 6：vue双向绑定原理
学Java，找哪吒
10-02 1万+
需求分析： 通过输入框，双向绑定文本框显示。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <cpn :number1="num1" :number2="num2"/> &lt
Vue -- 双向数据绑定原理
muzidigbig的博客
03-27 5264
Vue的双向数据绑定原理先说面试答案：答：vue.js是采用数据劫持结合发布者-订阅者模式的方式，通过来劫持各个属性的，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。具体步骤：第一步： 需要observer(观察者)对数据对象进行递归遍历，包括子属性对象的属性，都加上setter和getter这样的话，给这个对象的某个值赋值，就会触发setter，那么就能监听到了数据变化第二步compile(模板解析器)解析模板指令，将模板中的变量替换成数据，然后初始化。
手写Vue 的双向数据绑定
油墨香^-^的博客
05-19 762
在目前的前端面试中，vue的双向数据绑定已经成为了一个非常容易考到的点，即使不能当场写出来，至少也要能说出原理。 本篇文章中我将会仿照vue写一个双向数据绑定的实例，名字就叫myVue吧。结合注释，希望能让大家有所收获。 1、原理 Vue的双向数据绑定的原理相信大家也都十分了解了，主要是通过 Object对象的defineProperty属性，重写data的set和get函数来实现的,这里对原理不做过多描述，主要还是来实现一个实例。 为了使代码更加的清晰，这里只会实现最基本的内容，主要实现v-m
MVVM框架理解及其原理实现
01-27
说起这个MVVM模型，就不得不说MVC框架。将整个前端页面分成View，Controller，Modal，视图上发生变化，通过Controller（控件）将响应传入到Model（数据源），由数据源改变View上面的数据。整个过程看起来是行云流水...
浅析vue中的MVVM实现原理
10-17
主要介绍了浅析vue中的MVVM实现原理，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
mvvm双向绑定原理和实现
03-20
vue，mvvm双向绑定原理和实现 1.实现compile,进行模板的编译。指令和watcher更新函数； 2.实现Observe,监听所有的数据，并对变化数据发布通知； 3.实现watcher,作为一个中枢，接收到observe发来的通知，并执行...
详解Vue中的MVVM原理和实现方法
10-15
主要介绍了Vue中的MVVM原理和实现方法，文中讲解非常细致，帮助大家更好的理解和学习，感兴趣的朋友可以了解下
Vue双向数据绑定的原理
m0_65426289的博客
12-03 3931
1、vue双向数据绑定原理，又称vue响应式原理，是vue的核心，双向数据绑定是通过数据劫持结合发布者订阅者模式的方式来实现的，通过Object.defineProperty()来劫持各个属性的 setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调来渲染视图。也就是说数据和视图同步，数据发生变化，视图跟着变化，视图变化，数据也随之发生改变 2、vue实现双向数据绑定的核心是Object.defineProperty()方法 3、Object.defineProperty(obj,
vue双向绑定实现解析
06-20
通过带着读者手写简化版的vue双向绑定，了解vue双向绑定的核心原理; 从零开始实现vue的双向绑定，让大家可以更好的理解双向绑定的逻辑走向； 本项目依次实现了下面的功能 1、自定义的vue类 2、模板解析 Compile 类 3、数据代理 Observer 类 4、管理器 Dep 类 5、订阅者 Watcher 类 希望对大家有一定的帮助
手写Vue v-model双向绑定
weixin_52240193的博客
12-22 500
原生手写简单的v-model
3分钟带你搞懂Vue双向绑定原理及问题剖析
wanghuichen的博客
03-16 4846
Vue双向绑定原理及问题剖析，快速搞懂Vue双向绑定~
Vue的双向绑定原理（介绍）
qq_39747359的博客
02-10 653
Vue的双向绑定原理（介绍）
Vue 双向数据绑定原理
热门推荐
web分享客的博客
03-07 2万+
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。 vue实现双向数据绑定的原理就是利用了 Object.defineProperty() 这个方法重新定义了对象获取属性值(get)和设置属性值(set...
Vue实现双向数据绑定的4个方法
最新发布
祈澈菇凉
10-20 1146
可以通过自定义事件在组件之间实现双向数据绑定。父组件通过 props 传递数据给子组件，子组件在修改数据时，通过自定义事件将修改后的数据传递给父组件。<template><template>在子组件中，通过$emit方法触发input事件，并将修改后的数据传递给父组件。
【vue】手写vue2的双向绑定原理
CSDNJXZK的博客
04-07 159
vue2 双向绑定实现原理
mvvm框架的实现原理
10-14
MVVM框架的实现原理主要包括以下几个方面： 1. 数据绑定：MVVM框架通过数据绑定将View和ViewModel进行绑定，当ViewModel中的数据发生变化时，View会自动更新。 2. 命令绑定：MVVM框架通过命令绑定将View中的事件与...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值