Vue的MVVM响应式原理(双向数据绑定)源码解析（附面试题）

最新推荐文章于 2023-03-06 22:19:14 发布
最新推荐文章于 2023-03-06 22:19:14 发布
阅读量691 收藏 3
点赞数 4
分类专栏： vuejs 文章标签： vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_44749729/article/details/108169588
版权

MVVM

MVVM是Model-View-ViewModel的简写，将视图 UI 和业务逻辑分开
ViewMode：也就是mvc 的控制器，取出 Model 的数据同时帮忙处理 View 中由于需要展示内容而涉及的业务逻辑

源码

MVue.js

import {Observer, Watcher} from './Observer'

//编译类
class Compile{

    constructor(el,vm){

        //判断是否为节点
        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)
    }

    //编译
    compile(fragment){
        //1.获取子节点
        const childNodes = fragment.childNodes;
        [...childNodes].forEach( child => {
            // console.log(item)
            if(this.isElementNode(child)){
                //元素节点
                //编译元素节点
                // console.log('元素节点'+child.tagName)
                this.compileElement(child)
            }else{
                //文本节点
                //编译文本节点
                // console.log('文本节点'+child)
                this.compileText(child)
            }

            if(child.childNodes && child.childNodes.length){
                this.compile(child)
            }
        })
    }

    //编译元素节点
    compileElement(node){
        //取得属性
        const attrs = node.attributes
        //通过转换成数组来遍历属性
        let arr = [...attrs]
        arr.forEach(attr => {
            const {name, value} = attr
            //进行v-开头判定 true就是指令
            if(this.isDirective(name)){
                //v-text->text
                const [,dirctive] = name.split('-')
                //对on:click继续->click  而如果为text 就放在第一个参数
                //v-bind:src
                const [dirName,eventName] = dirctive.split(':')
                //对不同类型的属性进行赋值到节点上  更新数据  数据驱动视图
                compileUtil[dirName](node,value,this.vm,eventName)
                //删除有指令的标签的属性
                node.removeAttribute('v-'+ dirctive)
                
            }
            //@click='handle'
            else if(this.isEventName(name)){
                let [,eventName] = name.split('@')
                compileUtil['on'](node, value, this.vm, eventName)
            }
            //:class='red'
            else if(this.isEllipsisName(name)){
                let [, propsName] = name.split(':')
                compileUtil['bind'](node, value, this.vm, propsName)
            }
        });
    }

    //编译文本节点
    compileText(node){
        //获得文本
        const content = node.textContent
        //通过正则只取{{}}的文本
        const expr = /\{\{(.+?)\}\}/
        if(expr.test(content)){
            compileUtil['text'](node,content,this.vm)
        }
    }

    //@开头
    isEventName(attrName){
        return attrName.startsWith('@')
    }

    //：开头
    isEllipsisName(attrName){
        return attrName.startsWith(':')
    }

    //判断是否是以v-开头
    isDirective(attrName){
        return attrName.startsWith('v-')
    }

    //创建文档碎片对象
    node2Fragment(el){
        const fragment = document.createDocumentFragment()
        let firstChild;
        while(firstChild = el.firstChild){
            fragment.appendChild(firstChild)
        }
        return fragment
    }

    //判断是不是节点对象
    isElementNode(node){
        return node.nodeType === 1 ; 
    }
}

//编译工具类
export const compileUtil = {
    //node 节点  expr 属性指向的数据名  vm vue实例对象用于去的data数据  event  事件属性
    //解决 person.name类型
    getVal(expr,vm){
        //[person, name] data 之前的值  curr 当前值
        //执行过程  先将curr取到 person 将person对象付给data  再将curr取到name  就获得person.name
        return expr.split('.').reduce((data,currentVal) => {
            // console.log(currentVal)
            return data[currentVal]
        },vm.$options.data)
    },
    setVal(expr,vm,inputVal){
        return expr.split('.').reduce((data,currentVal) => {
            // console.log(currentVal)
            data[currentVal] = inputVal
        },vm.$options.data)
    },
    getContentVal(expr,vm){
        let value = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {                
            return this.getVal(args[1],vm)
        })
        return value
    },
    //处理文本
    text(node, expr, vm){
        let value
        //处理{{}}文本
        if(expr.indexOf('{{')!== -1){
            //取得{{}}里的内容 并调getval取得data的数据
            value = expr.replace(/\{\{(.+?)\}\}/g, (...args) => {                
                new Watcher(vm, args[1], () => {
                    this.updater.textUpdater(node,this.getContentVal(expr,vm))
                })
                return this.getVal(args[1],vm)
            })
        }
        //处理v-text
        else{
            value = this.getVal(expr, vm)
        }
        //数据渲染到视图
        this.updater.textUpdater(node,value)
    },
    html(node, expr, vm){
        let value = this.getVal(expr,vm)
        //绑定watcher 对数据监听 更改数据时，绑定对应更新的函数
        new Watcher(vm, expr, (newVal) => {
            this.updater.htmlUpdater(node,newVal)
        })
        this.updater.htmlUpdater(node,value)
    },
    model(node, expr, vm){
        const value = this.getVal(expr,vm)
        //数据=》视图
        new Watcher(vm, expr, (newVal) => {
            this.updater.modelUpdater(node,newVal)
        })
        //视图=》数据
        node.addEventListener('input', (e) => {
            this.setVal(expr, vm, e.target.value)
        })
        this.updater.modelUpdater(node,value)
    },
    //event 响应事件函数
    on(node, expr, vm, event){
        let fn = vm.$options.methods && vm.$options.methods[expr]
        node.addEventListener(event,fn.bind(vm),false)
    },
    //props 属性src等
    bind(node, expr, vm, props){
        const value = this.getVal(expr,vm)
        this.updater.bindUpdater(node,props,value)
    },
    //更新函数类
    updater:{
        textUpdater(node,value){
            node.textContent = value
        },
        htmlUpdater(node,value){
            node.innerHTML = value
        },
        modelUpdater(node,value){
            node.value = value
        },
        bindUpdater(node,props,value){
            node.setAttribute(props,value)
        }
    }
}

//Vue类
export class MVue{
     constructor(options){
         this.$el = options.el
         this.$data = options.$data
         this.$options = options
         if(this.$el){
             //1.实现数据观察者
             new Observer(this.$options.data)
             //2.实现指令解析器
             new Compile(this.$el,this)
             this.proxyData(this.$options.data)
         }
     }

     proxyData(data){
         for(const key in data){
             Object.defineProperty(this, key, {
                get(){
                    return data[key]
                 },
                 set(newVal){
                     data[key] = newVal
                 }
             })
         }
     }
 }

// export default MVue

Observer.js

import {compileUtil} from './MVue'

//数据观察者类
export class Observer{
    constructor(data){
        this.observer(data)
    }

    observer(data){
        if(data && typeof data === 'object'){
            //遍历data中的属性
            Object.keys(data).forEach(key => {
                this.defineReactive(data, key, data[key])
            })
        }
    }

    defineReactive(obj, key, value){
        //递归下一层
        this.observer(value)
        const dep = new Dep()
        //劫持数据  对所有属性进行劫持
        Object.defineProperty(obj,key,{
            //可遍历
            enumerable: true,
            //可更改
            configurable:false,
            get(){
                //订阅数据发生变化时，往dep中添加观察者
                Dep.target && dep.addSub(Dep.target)
                return value
            },
            //当我修改数据时，会进到set  然后进行监听 然后进行值的更新
            set: (newValue) => {
                //对于新值进行监听
                this.observer(newValue)
                if(newValue !== value){
                    value = newValue
                }
                //告诉dep变化
                //进行通知
                dep.notify()
            },
        })
    }
        
}

//数据依赖器
class Dep{
    constructor(){
        this.subs = [] 
    }
    //收集观察者
    addSub(watcher){
        this.subs.push(watcher)
    }
    //通知观察者更新
    notify(){
        //拿到观察者 然后更新
        this.subs.forEach(w => {
            w.update()
        })
    }
}


//观察数据
export class Watcher{

    constructor(vm,expr,cb){
        this.vm = vm
        this.expr = expr
        this.cb = cb
        //先保存旧值
        this.oldVla = this.getOldVal() 
    }

    getOldVal(){
        //未初始化  挂载在dep
        Dep.target = this
        let oldVal = compileUtil.getVal(this.expr, this.vm)
        Dep.target = null
        return oldVal
    }

    //在watcher中拿到新值  callback
    update(){
        let newVal = compileUtil.getVal(this.expr, this.vm)
        if(newVal !== this.oldVla){
            this.cb(newVal)
        }
    }
}

// module.exports = {
//     Observer, 
//     Watcher
// }

index.js

import './index.less';
import {MVue} from './MVue'

const vm = new MVue({
    el:'#app',
    data:{
        person:{
            name:'xa',
            age:18, 
        },
        msg:'MVVM',
        color:'red'
    },
    methods:{
        handel(){
            this.msg= '学习MVVM'
        }
    }
})

index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<title>webpack-template</title>
</head>

<body>
	<div id="app">
		<h2>{{person.name}}</h2>
		<h3 v-html='person.age'></h3>
		<h3 v-html='msg'></h3>
		<div v-text='msg'></div>
		<div v-text='person.name'></div>
		<input type="text" v-model='msg'>
		<button v-on:click='handel'>2222</button>
		<button @click='handel'>@@@</button>
		<ul>
			<li v-bind:class='color'>{{msg}}</li>
			<li :class='color'>{{msg}}</li>
			<li>{{msg}}</li>
		</ul>
	</div>
</body>
</html>

上面文件通过webpack进行打包

面试题

阐述一下你所理解vue的MVVM响应式原理
vue.js 则是采用数据劫持结合发布者-订阅者模式的方式，通过Object.defineProperty()来劫持各个属性的setter，getter，在数据变动时发布消息给订阅者，触发相应的监听回调。
MVVM作为数据绑定的入口，整合Observer、Compile和Watcher三者，通过Observer来监听自己的model数据变化，通过Compile来解析编译模板指令，最终利用Watcher搭起Observer和Compile之间的通信桥梁，达到数据变化 -> 视图更新；视图交互变化(input) -> 数据model变更的双向绑定效果

在这里插入图片描述

视频讲解

XINGAO丨
关注
专栏目录
Vue双向数据绑定(MVVM)的原理
01-18
MVVM 　　MVVM 是Model-View-ViewModel 的缩写，它是一种基于前端开发的架构模式，其核心是提供对View 和 ViewModel 的双向数据绑定，这使得ViewModel 的状态改变可以自动传递给 View，即所谓的数据双向绑定。 　　Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库，专注于View 层。它的核心是 MVVM 中的 VM，也就是 ViewModel。 ViewModel负责连接 View 和 Model，保证视图和数据的一致性，这种轻量级的架构让前端开发更加高效、便捷。 数据劫持 　　vue.js 是采用数据劫持
vue数据双向绑定的实现与原理解析（核心完整代码）
09-25
先声明，该代码是网上一位大佬提供的，但是学习它的代码过程中...该压缩文件内容是vue数据双向绑定的实现与原理解析，提供核心完整代码，并有我的代码注释，浅显易懂，但是需要es6的学习和有一定的javascript基础才行。
MVVM源码注释
weixin_49757430的博客
04-29 178
MVVM代码注释如下： function MVVM(options) { //给实例新增一个$options属性,.并且把传递过来的配置进行暂存 this.$options = options; //在实例上新增一个_data 保存传递过来的data数据 var data = this._data = this.$options.data; //保存this 为了之后使用this的时候保证this指向的正确性 var me = this; .
Object.defineProperty()介绍及使用
coucouxie的博客
10-08 364
对象是由多个键/值对组成的无序的集合。对象中每个属性可以是任意类型的值。 定义对象可以使用构造函数或字面量的形式： var obj = new Object; //obj = {} obj.name = “张三”; //添加描述 obj.say = function(){}; //添加行为 1 2 3 除了以上添加属性的方式，还可以使用Object.defineProperty定义新属性或修改原有的属性。 Object.defineProperty() 语法： Object.definePropert
Vue中MVVM数据双向绑定原理
c.j.h_code的博客
11-27 1324
vue响应原理是数据劫持结合发布者、订阅者的方式来实现的。通过object.defineProperty来劫持各个属性的setter和getter，在数据发生变化的时候发布消息给订阅者，触发响应的监听回调
mvvm数据双向绑定的原理
weixin_40545119的博客
11-04 216
VUE前端面试题 附答案.pdf
12-14
本文档是关于VUE前端面试题的汇总，涵盖了VUE框架的基础知识点，包括VUE的基本原理、双向数据绑定的原理、MVVM、MVC、MVP架构设计模式等。 VUE的基本原理 VUE框架的基本原理是通过Object.defineProperty()将数据...
vue-mvvm高级面试题
09-20
在Vue3.0中，响应式数据的创建过程如下： - 创建一个`Proxy`对象，该对象用于拦截数据的访问和修改。 - 使用`Reflect`对象来实现对原始对象的操作，这样可以保持代码的简洁性和类型安全性。 综上所述，MVVM模式...
Vue常见面试题-附答案解析
05-17
MVVM模式的核心在于ViewModel，它作为一个中间层，负责协调View和Model之间的数据流动，实现数据的双向绑定，使得视图和模型之间的同步工作自动化，开发人员无需手动操作DOM，只需关注业务逻辑。 Vue实现双向数据...
前端学习笔记，常见面试题，vue源码解析
最新发布
10-02
本学习笔记主要涵盖了Vue.js的基础知识、常见面试题以及源码解析，旨在帮助开发者深入理解Vue.js的运作机制，并提升在实际项目中的应用能力。 首先，Vue.js的基本概念和特性是学习的起点。Vue的核心思想是声明式...
MVVM双向数据绑定原理
handy_csdn的博客
02-13 369
通过Object.defineProperty()为data添加get()和set()方法，实现数据劫持 在set()方法中监听数据变化，实现视图更新 监听视图数据的变化，改变data中的值
mvvm数据双向绑定实现的原理
weixin_34092455的博客
09-30 359
以Vue.js框架为例子，使用的mvvm模式 view指的是页面的html和css构成的视图。model指的是从后端取到的数据模型viewmodel 指的是前端开发人员组织生成和维护的视图数据层。这一层包含的是视图行为和数据。视图行为指的是如页面加载进来时请求什么，将指定的数据放到指定的元素上，点击某个元素触发某事件。当viewmodel...
前端面试题：vue响应式原理 Vdom diff
欢迎来到我的博客
08-22 2256
vue的响应式原理，也算是面试中再常见不过的题目了，之前遇见这道题目只会说：利用的是Object.defineProperty进行的数据劫持，监听数据的变化，通知watcher进行的数据更新。总的来说这是没错的，但是只要面试官进一步的问，那一定是满脸的问号。昨天一天也是没有面试机会，所以就研究了一天这个东西，算是搞明白了（自我感觉），今天就把他来写成文章，希望大佬看到哪里不对给出指导，本文可能会有点长。上正文。 现在最流行的框架非vue，react莫属，他们流行起来的原因，离不开响应式，因为它在做一些.
前端架构模式MVVM及数据双向绑定原理
断翼天使
03-04 2242
一、概述 JS 几个流行的框架 Vuejs、AngularJS 都使用 MVVM 模式，该模式叫做视图模型双向数据绑定，以达到数据和视图快速同步的目的。 主要体现就是表单元素值变，JS变量值改变，若页面上有输出，输出值也改变，典型的代码如下 <div id="app"> <p>{{ message }}</p> <input v-model="message"> </div> new Vu...
Vue双向数据绑定原理(面试必问)
web全栈开发的博客
09-15 5106
obj：必需。目标对象prop：必需。需定义或修改的属性的名字descriptor：必需。目标属性所拥有的特性传入函数的对象。即第一个参数obj；针对属性，我们可以给这个属性设置一些特性，比如是否只读不可以写；是否可以被for…in或Object.keys()遍历。给对象的属性添加特性描述，目前提供两种形式：数据描述和存取器描述。一、访问器属性Object.defineProperty()函数。
MVVM的实现原理双向绑定的原理
qlin_11的博客
06-19 4229
在Vue中其实就是通过Object.defineProperty来劫持对象属性的setter和getter操作，并“种下”一个监听器，当数据发生变化的时候发出通知。 1.MVVM是什么？ 响应式，双向数据绑定，即MVVM。是指数据层（Model）-视图层（View）-数据视图（ViewModel）的响应式框架。它包括： 1.修改View层，Model对应数据发生变化。 2.Model数据变化，不需...
vue数据响应式
weixin_45270885的博客
04-16 403
响应式数据的最终目标，是当对象本身或对象属性发生变化时，将会运行一些函数，最常见的就是render函数。 在具体实现上，vue用到了几个核心部件： Observer Dep Watcher Scheduler Observer Observer要实现的目标非常简单，就是把一个普通的对象转换为响应式的对象 为了实现这一点，Observer把对象的每个属性通过Object.defineProperty转换为带有getter和setter的属性，这样一来，当访问或设置属性时，vue就有机会做一些别的事情。这些
MVVM双向数据绑定底层原理及示例
2201_75567958的博客
03-06 518
MVVM双向数据绑定底层原理及示例 vue
"Vue面试题解析：MVVM、生命周期、双向绑定、响应式原理、组件传递等
对于Vue的面试题合集，其中涵盖了对MVVM的理解、Vue的优点、Vue生命周期的解释、双向数据绑定原理、Vue2.x响应式原理、数组变化检测、Vue3.x响应式数据、v-model双向绑定原理、渲染器diff算法、路由实现、vuex的使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值