QCon北京「鸿蒙专场」火热来袭!即刻报名,与创新同行~ 了解详情
写点什么

剖析 Vue 原理 & 实现双向绑定 MVVM

  • 2019-08-22
  • 本文字数:7168 字

    阅读完需:约 24 分钟

剖析Vue原理&实现双向绑定MVVM

本文能帮你做什么?

1、了解 vue 的双向数据绑定原理以及核心代码模块

2、缓解好奇心的同时了解如何实现双向绑定

为了便于说明原理与实现,本文相关代码主要摘自 vue 源码, 并进行了简化改造,相对较简陋,并未考虑到数组的处理、数据的循环依赖等,也难免存在一些问题,欢迎大家指正。不过这些并不会影响大家的阅读和理解,相信看完本文后对大家在阅读 vue 源码的时候会更有帮助

本文所有相关代码均在 github 上面可找到 https://github.com/DMQ/mvvm


相信大家对 mvvm 双向绑定应该都不陌生了,一言不合上代码,下面先看一个本文最终实现的效果吧,和 vue 一样的语法,如果还不了解双向绑定,猛戳 Google


<div id="mvvm-app">    <input type="text" v-model="word">    <p>{{word}}</p>    <button v-on:click="sayHi">change model</button></div><script src="./js/observer.js"></script><script src="./js/watcher.js"></script><script src="./js/compile.js"></script><script src="./js/mvvm.js"></script><script>    var vm = new MVVM({        el: '#mvvm-app',        data: {            word: 'Hello World!'        },        methods: {            sayHi: function() {                this.word = 'Hi, everybody!';            }        }    });</script>
复制代码


效果:


几种实现双向绑定的做法

目前几种主流的 mvc(vm)框架都实现了单向数据绑定,而我所理解的双向数据绑定无非就是在单向绑定的基础上给可输入元素(input、textare 等)添加了 change(input)事件,来动态修改 model 和 view,并没有多高深。所以无需太过介怀是实现的单向或双向绑定。


实现数据绑定的做法有大致如下几种:


发布者-订阅者模式(backbone.js)

脏值检查(angular.js)

数据劫持(vue.js)


发布者-订阅者模式: 一般通过 sub, pub 的方式实现数据和视图的绑定监听,更新数据方式通常做法是 vm.set(‘property’, value),这里有篇文章讲的比较详细,有兴趣可复制打开http://www.html-js.com/article/Study-of-twoway-data-binding-JavaScript-talk-about-JavaScript-every-day


这种方式现在毕竟太 low 了,我们更希望通过 vm.property = value 这种方式更新数据,同时自动更新视图,于是有了下面两种方式


脏值检查: angular.js 是通过脏值检测的方式比对数据是否有变更,来决定是否更新视图,最简单的方式就是通过 setInterval() 定时轮询检测数据变动,当然 Google 不会这么 low,angular 只有在指定的事件触发时进入脏值检测,大致如下:


  • DOM 事件,譬如用户输入文本,点击按钮等。( ng-click )

  • XHR 响应事件 ( $http )

  • 浏览器 Location 变更事件 ( $location )

  • Timer 事件( interval )

  • 执行 apply()


数据劫持: vue.js 则是采用数据劫持结合发布者-订阅者模式的方式,通过 Object.defineProperty()来劫持各个属性的 setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。

思路整理

已经了解到 vue 是通过数据劫持的方式来做数据绑定的,其中最核心的方法便是通过 Object.defineProperty()来实现对属性的劫持,达到监听数据变动的目的,无疑这个方法是本文中最重要、最基础的内容之一,如果不熟悉 defineProperty,可以看这里:https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty


整理了一下,要实现 mvvm 的双向绑定,就必须要实现以下几点:


1.实现一个数据监听器 Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者


2.实现一个指令解析器 Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数


3.实现一个 Watcher,作为连接 Observer 和 Compile 的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图


4.mvvm 入口函数,整合以上三者


上述流程如图所示:


1、实现 Observer

ok, 思路已经整理完毕,也已经比较明确相关逻辑和模块功能了,let’s do it


我们知道可以利用 Obeject.defineProperty()来监听属性变动


那么将需要 observe 的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter 和 getter


这样的话,给这个对象的某个值赋值,就会触发 setter,那么就能监听到了数据变化。。相关代码可以是这样:


var data = {name: 'kindeng'};observe(data);data.name = 'dmq'; // 哈哈哈,监听到值变化了 kindeng --> dmq
function observe(data) { if (!data || typeof data !== 'object') { return; } // 取出所有属性遍历 Object.keys(data).forEach(function(key) { defineReactive(data, key, data[key]); });};
function defineReactive(data, key, val) { observe(val); // 监听子属性 Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { return val; }, set: function(newVal) { console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal); val = newVal; } });}
复制代码


这样我们已经可以监听每个数据的变化了,那么监听到变化之后就是怎么通知订阅者了,所以接下来我们需要实现一个消息订阅器,很简单,维护一个数组,用来收集订阅者,数据变动触发 notify,再调用订阅者的 update 方法,代码改善之后是这样:


// ... 省略function defineReactive(data, key, val) {        var dep = new Dep();    observe(val); // 监听子属性
Object.defineProperty(data, key, { // ... 省略 set: function(newVal) { if (val === newVal) return; console.log('哈哈哈,监听到值变化了 ', val, ' --> ', newVal); val = newVal; dep.notify(); // 通知所有订阅者 } });} function Dep() { this.subs = [];}Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); }};
复制代码


那么问题来了,谁是订阅者?怎么往订阅器添加订阅者?


没错,上面的思路整理中我们已经明确订阅者应该是 Watcher, 而且 var dep = new Dep();是在 defineReactive 方法内部定义的,所以想通过 dep 添加订阅者,就必须要在闭包内操作,所以我们可以在 getter 里面动手脚:


// Observer.js// ...省略
Object.defineProperty(data, key, { get: function() { // 由于需要在闭包内添加watcher // 所以通过Dep定义一个全局target属性,暂存watcher, 添加完移除 Dep.target && dep.addDep(Dep.target); return val; } // ... 省略}); // Watcher.jsWatcher.prototype = { get: function(key) { Dep.target = this; // 这里会触发属性的getter,从而添加订阅者 this.value = data[key]; Dep.target = null; }}
复制代码


这里已经实现了一个 Observer 了,已经具备了监听数据和数据变化通知订阅者的功能。那么接下来就是实现 Compile 了

2、实现 Compile

compile 主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图,如图所示:



因为遍历解析的过程有多次操作 dom 节点,为提高性能和效率,会先将跟节点 el 转换成文档碎片 fragment 进行解析编译操作,解析完成,再将 fragment 添加回原来的真实 dom 节点中:


function Compile(el) {        this.$el = this.isElementNode(el) ? el : document.querySelector(el);    if (this.$el) {        this.$fragment = this.node2Fragment(this.$el);        this.init();        this.$el.appendChild(this.$fragment);    }}Compile.prototype = {    init: function() { this.compileElement(this.$fragment); },    node2Fragment: function(el) {         var fragment = document.createDocumentFragment(), child;        // 将原生节点拷贝到fragment        while (child = el.firstChild) {            fragment.appendChild(child);        }                return fragment;    }};
复制代码


compileElement 方法将遍历所有节点及其子节点,进行扫描解析编译,调用对应的指令渲染函数进行数据渲染,并调用对应的指令更新函数进行绑定,详看代码及注释说明:


Compile.prototype = {    // ... 省略    compileElement: function(el) {        var childNodes = el.childNodes, me = this;        [].slice.call(childNodes).forEach(function(node) {            var text = node.textContent;            var reg = /\{\{(.*)\}\}/;    // 表达式文本            // 按元素节点方式编译            if (me.isElementNode(node)) {                me.compile(node);            } else if (me.isTextNode(node) && reg.test(text)) {                me.compileText(node, RegExp.$1);            }             // 遍历编译子节点            if (node.childNodes && node.childNodes.length) {                me.compileElement(node);            }        });    },
compile: function(node) { var nodeAttrs = node.attributes, me = this; [].slice.call(nodeAttrs).forEach(function(attr) // 规定:指令以 v-xxx 命名 // 如 <span v-text="content"></span> 中指令为 v-text var attrName = attr.name; // v-text if (me.isDirective(attrName)) { var exp = attr.value; // content var dir = attrName.substring(2); // text if (me.isEventDirective(dir)) { // 事件指令, 如 v-on:click compileUtil.eventHandler(node, me.$vm, exp, dir); } else { // 普通指令 compileUtil[](node, me.$vm, exp); } } }); }}; // 指令处理集合var compileUtil = { text: function(node, vm, exp) { this.bind(node, vm, exp, 'text'); }, bind: function(node, vm, exp, dir) { var updaterFn = updater[dir + 'Updater']; // 第一次初始化视图 updaterFn && updaterFn(node, vm[exp]); // 实例化订阅者,此操作会在对应的属性消息订阅器中添加了该订阅者watcher new Watcher(vm, exp, function(value, oldValue) { // 一旦属性值有变化,会收到通知执行此更新函数,更新视图 updaterFn && updaterFn(node, value, oldValue); }); }}; // 更新函数var updater = { textUpdater: function(node, value) { node.textContent = typeof value == 'undefined' ? '' : value; }};
复制代码


这里通过递归遍历保证了每个节点及子节点都会解析编译到,包括了{{}}表达式声明的文本节点。指令的声明规定是通过特定前缀的节点属性来标记,如<span v-text=“content” other-attr 中 v-text 便是指令,而 other-attr 不是指令,只是普通的属性。


监听数据、绑定更新函数的处理是在 compileUtil.bind()这个方法中,通过 new Watcher()添加回调来接收数据变化的通知


至此,一个简单的 Compile 就完成了。接下来要看看 Watcher 这个订阅者的具体实现了

3、实现 Watcher

Watcher 订阅者作为 Observer 和 Compile 之间通信的桥梁,主要做的事情是:


1、在自身实例化时往属性订阅器(dep)里面添加自己


2、自身必须有一个 update()方法


3、待属性变动 dep.notice()通知时,能调用自身的 update()方法,并触发 Compile 中绑定的回调,则功成身退。


如果有点乱,可以回顾下前面的思路整理


function Watcher(vm, exp, cb) {    this.cb = cb;    this.vm = vm;    this.exp = exp;    // 此处为了触发属性的getter,从而在dep添加自己,结合Observer更易理解    this.value = this.get(); }Watcher.prototype = {    update: function() {        this.run();    // 属性值变化收到通知    },    run: function() {        var value = this.get(); // 取到最新值        var oldVal = this.value;        if (value !== oldVal) {            this.value = value;            // 执行Compile中绑定的回调,更新视图            this.cb.call(this.vm, value, oldVal);         }    },    get: function() {        Dep.target = this;    // 将当前订阅者指向自己        var value = this.vm[exp];    // 触发getter,添加自己到属性订阅器中        Dep.target = null;    // 添加完毕,重置        return value;    }};// 这里再次列出Observer和Dep,方便理解Object.defineProperty(data, key, {    get: function() {        // 由于需要在闭包内添加watcher        // 所以可以在Dep定义一个全局target属性,暂存watcher, 添加完移除        Dep.target && dep.addDep(Dep.target);        return val;    }    // ... 省略});Dep.prototype = {    notify: function() {        this.subs.forEach(function(sub) {            sub.update(); // 调用订阅者的update方法,通知变化        });    }};
复制代码


实例化 Watcher 的时候,调用 get()方法,通过 Dep.target = watcherInstance 标记订阅者是当前 watcher 实例,强行触发属性定义的 getter 方法,getter 方法执行的时候,就会在属性的订阅器 dep 添加当前 watcher 实例,从而在属性值有变化的时候,watcherInstance 就能收到更新通知。


ok, Watcher 也已经实现了。


基本上 vue 中数据绑定相关比较核心的几个模块也是这几个,打开链接https://github.com/vuejs/vue , 在 src 目录可找到 vue 源码。最后来讲讲 MVVM 入口文件的相关逻辑和实现吧,相对就比较简单了~

4、实现 MVVM

MVVM 作为数据绑定的入口,整合 Observer、Compile 和 Watcher 三者,通过 Observer 来监听自己的 model 数据变化,通过 Compile 来解析编译模板指令,最终利用 Watcher 搭起 Observer 和 Compile 之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据 model 变更的双向绑定效果。


一个简单的 MVVM 构造器是这样子:


function MVVM(options) {    this.$options = options;    var data = this._data = this.$options.data;    observe(data, this);    this.$compile = new Compile(options.el || document.body, this);}
复制代码


但是这里有个问题,从代码中可看出监听的数据对象是 options.data,每次需要更新视图,则必须通过


var vm = new MVVM({data:{name: 'kindeng'}}); vm._data.name = 'dmq';
复制代码


这样的方式来改变数据。


显然不符合我们一开始的期望,我们所期望的调用方式应该是这样的:


var vm = new MVVM({data: {name: 'kindeng'}}); vm.name = 'dmq';
复制代码


所以这里需要给 MVVM 实例添加一个属性代理的方法,使访问 vm 的属性代理为访问 vm._data 的属性,改造后的代码如下:


function MVVM(options) {    this.$options = options;    var data = this._data = this.$options.data, me = this;    // 属性代理,实现 vm.xxx -> vm._data.xxx    Object.keys(data).forEach(function(key) {        me._proxy(key);    });    observe(data, this);    this.$compile = new Compile(options.el || document.body, this);}
MVVM.prototype = { _proxy: function(key) { var me = this; Object.defineProperty(me, key, { configurable: false, enumerable: true, get: function proxyGetter() { return me._data[key]; }, set: function proxySetter(newVal) { me._data[key] = newVal; } }); }};
复制代码


这里主要还是利用了 Object.defineProperty()这个方法来劫持了 vm 实例对象的属性的读写权,使读写 vm 实例的属性转成读写了 vm._data 的属性值,达到鱼目混珠的效果,哈哈


至此,全部模块和功能已经完成了,如本文开头所承诺的两点。一个简单的 MVVM 模块已经实现,其思想和原理大部分来自经过简化改造的 vue 源码,在这里https://github.com/DMQ/mvvm可以看到本文的所有相关代码。


由于本文内容偏实践,所以代码量较多,且不宜列出大篇幅代码,所以建议想深入了解的童鞋可以再次结合本文源代码来进行阅读,这样会更加容易理解和掌握。

总结

本文主要围绕“几种实现双向绑定的做法”、“实现 Observer”、“实现 Compile”、“实现 Watcher”、“实现 MVVM”这几个模块来阐述了双向绑定的原理和实现。并根据思路流程渐进梳理讲解了一些细节思路和比较关键的内容点,以及通过展示部分关键代码讲述了怎样一步步实现一个双向绑定 MVVM。文中可能会有一些不够严谨的思考和错误,欢迎大家指正,有兴趣欢迎一起探讨和改进~


最后,感谢您的阅读!


本文转载自公众号小时光茶舍(ID:gh_7322a0f167b5)。


原文链接:


https://mp.weixin.qq.com/s/V38tRAExUOUYkcPguIRq-w


2019-08-22 13:442661

评论

发布
暂无评论
发现更多内容

运维报表有哪些内容?有什么用?

行云管家

运维 报表 IT运维 容器化部署

逆天!腾讯大神纯手撸“架构师速成手册”Github狂获4.5kstar

Java你猿哥

Java 架构 ssm 架构设计 架构师

亿级日活业务稳如磐石,华为云CodeArts PerfTest发布

华为云开发者联盟

云计算 后端 华为云 华为云开发者联盟 企业号 4 月 PK 榜

YARN 远程代码执行(RCE)安全漏洞问题分析与解决方案

明哥的IT随笔

大数据 YARN 数据安全 RCE

阿里新一代微服务,内部大佬手抄的笔记+脑图不容错过,全是精华

做梦都在改BUG

Java 架构 微服务 Spring Cloud Aliababa

从源码全面解析LinkedBlockingQueue的来龙去脉

做梦都在改BUG

mac上好用的效率软件:Alfred 5 激活版

真大的脸盆

Mac Mac 软件 效率软件

算法题每日一练: 青蛙跳台阶

知心宝贝

数据结构 算法 前端 后端 三周年连更

从此脱离CRUD!Github热榜第三架构师速成手册成功颠覆了我的认知

Java你猿哥

架构 ssm 架构设计 架构师 微服务实战

裸辞底气!GitHub飙升“java面试笔记2023” 了解下八股文天花板

Java你猿哥

Java 面试 Spring Boot ssm 八股文

堡垒机英文是什么?有哪些品牌?

行云管家

网络安全 堡垒机

合合信息新推出反光消除技术,助力手写文字识别更精准

合合技术团队

人工智能 文字识别 扫描全能王 反光去除

【FAQ】关于JavaScript版本的华为地图服务Map的点击事件与Marker的点击事件存在冲突的解决方案

HarmonyOS SDK

HMS Core

Apifox WebSocket 调试功能你会用了吗?

Apifox

程序员 接口 websocket API API 调试

阿里技术官神作!大厂亿级流量性能调优学习手册,堪称保姆级教学

做梦都在改BUG

Java 性能优化 性能调优

聊聊 IP packet 的 TTL 与 tcp segment 的 MSL

明哥的IT随笔

TCP/IP TTL MSL

Spring Boot 整合 Redis 基于 Stream 消息队列 实现异步秒杀下单

Java你猿哥

Java redis stream ssm 消息队列

HashData认证云原生数据仓库管理工程师培训报名开启!

酷克数据HashData

聊聊 Zookeeper 的 4lw 与信息安全

明哥的IT随笔

zookeeper 数据安全

区块链基础设施 NFTScan 新增支持 Aptos 网络

NFT Research

区块链+ NFT

本铯智能科技是家怎样的共享电动车厂家?

共享电单车厂家

共享电动车厂家 共享电单车厂商 本铯智能科技 本铯智能电动车厂家

与全球开发者创新共赢,全球首个“开发者村” 正式落成

极客天地

读书笔记丨远程服务调用和RESTful,如何分析和抉择?

华为云开发者联盟

开发 华为云 华为云开发者联盟 企业号 4 月 PK 榜 远程服务调用

ChatGPT 会在三年内终结编程吗?| 社区征文

神木鼎

三周年征文

一文详解多模态认知智能

华为云开发者联盟

人工智能 华为云 AIGC 华为云开发者联盟 企业号 4 月 PK 榜

人脸活体检测初识

六月的雨在InfoQ

人脸活体检测 三周年连更 人脸数据库 人脸辨识度

那些关于DIP器件不得不说的坑

华秋PCB

插件 DIP 元器件 PCB PCB设计

Spring Boot 整合 Redis 基于 Stream 消息队列 实现异步秒杀下单

做梦都在改BUG

爆肝Java九大核心专题,666页内容,我收割了5个大厂offer

Java你猿哥

Java MySQL JVM 消息队列

阿里限量的性能调优+微服务+高并发设计,真的太香了!

做梦都在改BUG

Java 微服务架构 系统设计 性能调优 亿级并发

ByteHouse云数仓版查询性能优化和MySQL生态完善

NineData

数据库 架构 字节跳动 Clickhouse bytehouse

剖析Vue原理&实现双向绑定MVVM_语言 & 开发_邓木琴_InfoQ精选文章