vue双向绑定原理
来源:互联网 发布:韦德公牛数据 编辑:程序博客网 时间:2024/04/18 10:16
vue的最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统。
实现数据绑定的做法有以下几种:
发布者-订阅者模式(backbone.js)
脏值检查(Angular.js)
数据劫持(vue.js)
发布者订阅者模式:一般通过sub,pub的方式实现数据和视图的绑定监听,更新数据方式通常做法是vm.set('property',value)。
数据劫持:vue.js是采用数据劫持结合发布者-订阅者模式的方式,通过Object.defineProperty()来劫持各个属性的setter,getter,在数据变动时发布消息给订阅者,触发相应的监听回调。
一、访问器属性
访问器属性是对象的一种特殊属性,它不能直接在对象中设置,而必须通过defineProperty方法单独定义。
var obj={}; Object.defineProperty(obj,'hello',{ get:function () { return sth; }, set:function (newVal) { //do something } });
访问器属性的“值”比较特殊,读取或设置访问器属性的值,实际上是调用其内部特性:get和set函数。get和set方法内部的this都指向obj。
二、简单的双向绑定实现
<input type="text" id="a"><span id="b"></span><script> var obj={}; Object.defineProperty(obj,'hello',{ set:function (newVal) { document.getElementById('a').value=newVal; document.getElementById('b').innerHTML=newVal; } }); document.addEventListener('keyup',function (e) { obj.hello=e.target.value; });</script>
思路整理
要实现MVVM的双向绑定,需要实现以下几点:
1、实现一个数据监听器Observer,能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者
2、实现一个指令解析器Compile,对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数
3、实现一个Watcher,作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图
4、MVVM入口函数,整合以上三者
流程如下:
1、实现Observer
// 能够对数据对象的所有属性进行监听,如有变动可拿到最新值并通知订阅者// vm是实例化的对象,obj是实例化对象中的data对象 function observe (obj, vm) { Object.keys(obj).forEach(function (key) { defineReactive(vm, key, obj[key]); }); }// obj是实例化的vm对象,key,value是data属性中的键值对 function defineReactive (obj, key, val) {// 实现消息订阅者,即维护一个数组 var dep = new Dep();// 通过数据劫持实现数据绑定 Object.defineProperty(obj, key, { get: function () { // 添加订阅者watcher到主题对象Dep if (Dep.target) dep.addSub(Dep.target); return val }, set: function (newVal) { if (newVal === val) return val = newVal; // 作为发布者发出通知 dep.notify(); } }); }2、实现Compile
// 因为遍历解析的过程有多次操作dom节点,为提高性能和效率,// 会先将跟节点el转换成文档碎片fragment进行解析编译操作,解析完成,再将fragment添加回原来的真实dom节点中 function nodeToFragment (node, vm) {// createDocumentFragment是创建一个文档片段 var flag = document.createDocumentFragment(); var child; while (child = node.firstChild) { compile(child, vm); flag.appendChild(child); // 将子节点劫持到文档片段中 } return flag; }
// 对每个元素节点的指令进行扫描和解析,根据指令模板替换数据,以及绑定相应的更新函数 function compile (node, vm) { var reg = /\{\{(.*)\}\}/; // 节点类型为元素 if (node.nodeType === 1) { var attr = node.attributes; // 解析属性 for (var i = 0; i < attr.length; i++) { if (attr[i].nodeName == 'v-model') { var name = attr[i].nodeValue; // 获取v-model绑定的属性名 node.addEventListener('input', function (e) { // 给相应的data属性赋值,进而触发该属性的set方法 vm[name] = e.target.value; }); node.value = vm[name]; // 将data的值赋给该node node.removeAttribute('v-model'); } } new Watcher(vm, node, name, 'input'); } // 节点类型为text if (node.nodeType === 3) { if (reg.test(node.nodeValue)) { var name = RegExp.$1; // 获取匹配到的字符串 name = name.trim(); new Watcher(vm, node, name, 'text'); } } }
3、实现Watcher
//作为连接Observer和Compile的桥梁,能够订阅并收到每个属性变动的通知,执行指令绑定的相应回调函数,从而更新视图//Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是://1、在自身实例化时往属性订阅器(dep)里面添加自己//2、自身必须有一个update()方法//3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。 function Watcher (vm, node, name, nodeType) {// this为watcher函数 Dep.target = this;// console.log(this); this.name = name; this.node = node; this.vm = vm; this.nodeType = nodeType; this.update(); Dep.target = null; } Watcher.prototype = { update: function () { this.get(); if (this.nodeType == 'text') { this.node.nodeValue = this.value; } if (this.nodeType == 'input') { this.node.value = this.value; } }, // 获取data中的属性值 get: function () { this.value = this.vm[this.name]; // 触发相应属性的get } } function Dep () { this.subs = [] } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } };4、实现MVVM
function Vue (options) { this.data = options.data; var data = this.data; observe(data, this); var id = options.el; var dom = nodeToFragment(document.getElementById(id), this); // 编译完成后,将dom返回到app中 document.getElementById(id).appendChild(dom); }// mvvm入口函数,整合以上三者 var vm = new Vue({ el: 'app', data: { text: 'hello world' } });
参考文献地址:https://segmentfault.com/a/1190000006599500
http://www.cnblogs.com/kidney/p/6052935.html?utm_source=gold_browser_extension
阅读全文
0 0
- vue双向绑定原理
- vue双向数据绑定原理
- Vue 双向数据绑定原理
- Vue双向数据绑定原理分析
- vue双向数据绑定的原理解密
- 剖析Vue原理&实现双向绑定MVVM
- 剖析Vue原理&实现双向绑定MVVM
- Vue.js双向绑定的实现原理
- 剖析Vue原理&实现双向绑定MVVM
- 转-Vue双向绑定的原理
- 剖析Vue原理&实现双向绑定MVVM
- vue双向数据绑定的原理
- Vue.js双向数据绑定原理
- vue实现数据双向绑定原理剖析
- Vue双向数据绑定原理解析
- Vue.js双向绑定的实现原理
- vue.js双向数据绑定实现原理
- Vue的双向绑定原理及实现
- noi2017解题报告(部分)
- 使用ActiveMQ进行C++与C#的通信1
- 前端防止xss攻击的最直接方式,分享一下
- 持有对象(集合)
- handler传递多种复杂数据
- vue双向绑定原理
- 【caffe源代码的梳理之四】caffe数据I/O模块——数据读取层DataLayer
- [学习笔记]微信非80端口网页授权
- android 权限申请
- 第二个项目:多线程
- tensorflow加载saver.restore目录报错
- 计算器(1)
- 计算机网络相关知识总结
- IntelliJ IDEA部署项目时找不到artifact