vue源码解析之--数据双向绑定
2017-06-21 18:39
756 查看
在短时间内迅速使用vue构建了两个demo,一个eleme外卖平台webapp,还有一个是新闻网站。除了练习项目,也阅读了很多文章,收获颇多,成长很快。总结一下:
vue简单,轻量,易上手,API简单,模板也符合web编程习惯。
vue是MVVM的一个很好实践,核心思想是数据驱动和组件化。
数据驱动指的是,model改变,驱动view自动更新。支持自动计算属性和依赖追踪的模板表达式。
组件化,指的是用可复用、解耦的组件来自由组合、嵌套来构造完整的页面。组件设计原则:①页面上每个独立的可视/可交互区域视为一个组件②每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护、③页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。 边界把握: 业务逻辑划分(降低耦合)。
数据驱动是vue的核心,首先说下他的思想:通过对属性的数据劫持(Object.defineProperty)+观察者模式来实现。
核心总结:
1、Vue将传入的data转换为Observer,每个Observer都带有一个dep数组用来传递依赖,也就是告诉外界自身的变化,dep的注册过程将在data的getter里面完成,dep的callbak触发,在setter中完成。
2、 Vue将获取模版html,转换为render方法,render是virtualdom式(vnode)。
3、Vue创建了根Watcher,callback为2中的render。watcher构造方法中会自动run一次callback ,这会导致:render被调用 => data中的属性 getter被调用 => 属性的dep和watcher建立关系。
4、当data的属性值发生变化时 => setter 被触发 => dep的callback(watcher)被触发 => watcher的callbak触发 => render被触发。
借鉴一篇不错的文章:https://github.com/DMQ/mvvm
1、实现Observer
利用Obeject.defineProperty()来监听属性变动。
那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter。
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:
2、实现Compile
compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
3、实现Watcher
Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
4、实现MVVM
MVVM作为数据绑定的入口,整合Observer、Compile和Watcher三者,通过Observer来监听自己的model数据变化,通过Compile来解析编译模板指令,最终利用Watcher搭起Observer和Compile之间的通信桥梁,达到数据变化 -> 视图更新;视图交互变化(input) -> 数据model变更的双向绑定效果。
一个简单的MVVM构造器是这样子:
5、html
vue简单,轻量,易上手,API简单,模板也符合web编程习惯。
vue是MVVM的一个很好实践,核心思想是数据驱动和组件化。
数据驱动指的是,model改变,驱动view自动更新。支持自动计算属性和依赖追踪的模板表达式。
组件化,指的是用可复用、解耦的组件来自由组合、嵌套来构造完整的页面。组件设计原则:①页面上每个独立的可视/可交互区域视为一个组件②每个组件对应一个工程目录,组件所需要的各种资源在这个目录下就近维护、③页面不过是组件的容器,组件可以嵌套自由组合形成完整的页面。 边界把握: 业务逻辑划分(降低耦合)。
数据驱动是vue的核心,首先说下他的思想:通过对属性的数据劫持(Object.defineProperty)+观察者模式来实现。
核心总结:
1、Vue将传入的data转换为Observer,每个Observer都带有一个dep数组用来传递依赖,也就是告诉外界自身的变化,dep的注册过程将在data的getter里面完成,dep的callbak触发,在setter中完成。
2、 Vue将获取模版html,转换为render方法,render是virtualdom式(vnode)。
3、Vue创建了根Watcher,callback为2中的render。watcher构造方法中会自动run一次callback ,这会导致:render被调用 => data中的属性 getter被调用 => 属性的dep和watcher建立关系。
4、当data的属性值发生变化时 => setter 被触发 => dep的callback(watcher)被触发 => watcher的callbak触发 => render被触发。
借鉴一篇不错的文章:https://github.com/DMQ/mvvm
1、实现Observer
利用Obeject.defineProperty()来监听属性变动。
那么将需要observe的数据对象进行递归遍历,包括子属性对象的属性,都加上 setter和getter。
这样的话,给这个对象的某个值赋值,就会触发setter,那么就能监听到了数据变化。。相关代码可以是这样:
function Observer(data) { this.data = data; this.walk(data); } Observer.prototype = { walk: function(data) { var me = this; Object.keys(data).forEach(function(key) { me.convert(key, data[key]); }); }, convert: function(key, val) { this.defineReactive(this.data, key, val); }, defineReactive: function(data, key, val) { var dep = new Dep(); var childObj = observe(val); Object.defineProperty(data, key, { enumerable: true, // 可枚举 configurable: false, // 不能再define get: function() { if (Dep.target) { dep.depend(); } return val; }, set: function(newVal) { if (newVal === val) { return; } val = newVal; // 新的值是object的话,进行监听 childObj = observe(newVal); // 通知订阅者 dep.notify(); } }); } }; function observe(value, vm) { if (!value || typeof value !== 'object') { return; } return new Observer(value); }; var uid = 0; function Dep() { this.id = uid++; this.subs = []; } Dep.prototype = { addSub: function(sub) { this.subs.push(sub); }, depend: function() { Dep.target.addDep(this); }, removeSub: function(sub) { var index = this.subs.indexOf(sub); if (index != -1) { this.subs.splice(index, 1); } }, notify: function() { this.subs.forEach(function(sub) { sub.update(); }); } }; Dep.target = null;
2、实现Compile
compile主要做的事情是解析模板指令,将模板中的变量替换成数据,然后初始化渲染页面视图,并将每个指令对应的节点绑定更新函数,添加监听数据的订阅者,一旦数据有变动,收到通知,更新视图。
function Compile(el, vm) { this.$vm = vm; 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 = { node2Fragment: function(el) { var fragment = document.createDocumentFragment(), child; // 将原生节点拷贝到fragment while (child = el.firstChild) { fragment.appendChild(child); } return fragment; }, init: function() { this.compileElement(this.$fragment); }, 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) { var attrName = attr.name; if (me.isDirective(attrName)) { var exp = attr.value; var dir = attrName.substring(2); // 事件指令 if (me.isEventDirective(dir)) { compileUtil.eventHandler(node, me.$vm, exp, dir); // 普通指令 } else { compileUtil[dir] && compileUtil[dir](node, me.$vm, exp); } node.removeAttribute(attrName); } }); }, compileText: function(node, exp) { compileUtil.text(node, this.$vm, exp); }, isDirective: function(attr) { return attr.indexOf('v-') == 0; }, isEventDirective: function(dir) { return dir.indexOf('on') === 0; }, isElementNode: function(node) { return node.nodeType == 1; }, isTextNode: function(node) { return node.nodeType == 3; } }; // 指令处理集合 var compileUtil = { text: function(node, vm, exp) { this.bind(node, vm, exp, 'text'); }, html: function(node, vm, exp) { this.bind(node, vm, exp, 'html'); }, model: function(node, vm, exp) { this.bind(node, vm, exp, 'model'); var me = this, val = this._getVMVal(vm, exp); node.addEventListener('input', function(e) { var newValue = e.target.value; if (val === newValue) { return; } me._setVMVal(vm, exp, newValue); val = newValue; }); }, class: function(node, vm, exp) { this.bind(node, vm, exp, 'class'); }, bind: function(node, vm, exp, dir) { var updaterFn = updater[dir + 'Updater']; updaterFn && updaterFn(node, this._getVMVal(vm, exp)); new Watcher(vm, exp, function(value, oldValue) { updaterFn && updaterFn(node, value, oldValue); }); }, // 事件处理 eventHandler: function(node, vm, exp, dir) { var eventType = dir.split(':')[1], fn = vm.$options.methods && vm.$options.methods[exp]; if (eventType && fn) { node.addEventListener(eventType, fn.bind(vm), false); } }, _getVMVal: function(vm, exp) { var val = vm; exp = exp.split('.'); exp.forEach(function(k) { val = val[k]; }); return val; }, _setVMVal: function(vm, exp, value) { var val = vm; exp = exp.split('.'); exp.forEach(function(k, i) { // 非最后一个key,更新val的值 if (i < exp.length - 1) { val = val[k]; } else { val[k] = value; } }); } }; var updater = { textUpdater: function(node, value) { node.textContent = typeof value == 'undefined' ? '' : value; }, htmlUpdater: function(node, value) { node.innerHTML = typeof value == 'undefined' ? '' : value; }, classUpdater: function(node, value, oldValue) { var className = node.className; className = className.replace(oldValue, '').replace(/\s$/, ''); var space = className && String(value) ? ' ' : ''; node.className = className + space + value; }, modelUpdater: function(node, value, oldValue) { node.value = typeof value == 'undefined' ? '' : value; } };
3、实现Watcher
Watcher订阅者作为Observer和Compile之间通信的桥梁,主要做的事情是: 1、在自身实例化时往属性订阅器(dep)里面添加自己 2、自身必须有一个update()方法 3、待属性变动dep.notice()通知时,能调用自身的update()方法,并触发Compile中绑定的回调,则功成身退。
function Watcher(vm, expOrFn, cb) { this.cb = cb; this.vm = vm; this.expOrFn = expOrFn; this.depIds = {}; if (typeof expOrFn === 'function') { this.getter = expOrFn; } else { this.getter = this.parseGetter(expOrFn); } 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; this.cb.call(this.vm, value, oldVal); } }, addDep: function(dep) { // 1. 每次调用run()的时候会触发相应属性的getter // getter里面会触发dep.depend(),继而触发这里的addDep // 2. 假如相应属性的dep.id已经在当前watcher的depIds里,说明不是一个新的属性,仅仅是改变了其值而已 // 则不需要将当前watcher添加到该属性的dep里 // 3. 假如相应属性是新的属性,则将当前watcher添加到新属性的dep里 // 如通过 vm.child = {name: 'a'} 改变了 child.name 的值,child.name 就是个新属性 // 则需要将当前watcher(child.name)加入到新的 child.name 的dep里 // 因为此时 child.name 是个新值,之前的 setter、dep 都已经失效,如果不把 watcher 加入到新的 child.name 的dep中 // 通过 child.name = xxx 赋值的时候,对应的 watcher 就收不到通知,等于失效了 // 4. 每个子属性的watcher在添加到子属性的dep的同时,也会添加到父属性的dep // 监听子属性的同时监听父属性的变更,这样,父属性改变时,子属性的watcher也能收到通知进行update // 这一步是在 this.get() --> this.getVMVal() 里面完成,forEach时会从父级开始取值,间接调用了它的getter // 触发了addDep(), 在整个forEach过程,当前wacher都会加入到每个父级过程属性的dep // 例如:当前watcher的是'child.child.name', 那么child, child.child, child.child.name这三个属性的dep都会加入当前watcher if (!this.depIds.hasOwnProperty(dep.id)) { dep.addSub(this); this.depIds[dep.id] = dep; } }, get: function() { Dep.target = this; var value = this.getter.call(this.vm, this.vm); Dep.target = null; return value; }, parseGetter: function(exp) { if (/[^\w.$]/.test(exp)) return; var exps = exp.split('.'); return function(obj) { for (var i = 0, len = exps.length; i < len; i++) { if (!obj) return; obj = obj[exps[i]]; } return obj; } } };
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; var me = this; // 数据代理 // 实现 vm.xxx -> vm._data.xxx Object.keys(data).forEach(function(key) { me._proxyData(key); }); this._initComputed(); observe(data, this); this.$compile = new Compile(options.el || document.body, this) } MVVM.prototype = { $watch: function(key, cb, options) { new Watcher(this, key, cb); }, _proxyData: function(key, setter, getter) { var me = this; setter = setter || Object.defineProperty(me, key, { configurable: false, enumerable: true, get: function proxyGetter() { return me._data[key]; }, set: function proxySetter(newVal) { me._data[key] = newVal; } }); }, _initComputed: function() { var me = this; var computed = this.$options.computed; if (typeof computed === 'object') { Object.keys(computed).forEach(function(key) { Object.defineProperty(me, key, { get: typeof computed[key] === 'function' ? computed[key] : computed[key].get, set: function() {} }); }); } } };
5、html
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>MVVM</title> </head> <body> <div id="mvvm-app"> <input type="text" v-model="someStr"> <input type="text" v-model="child.someStr"> <!-- <p v-class="className" class="abc"> {{someStr}} <span v-text="child.someStr"></span> </p> --> <p>{{getHelloWord}}</p> <p v-html="child.htmlStr"></p> <button v-on:click="clickBtn">change model</button> </div> <script src="http://cdn.bootcss.com/vue/1.0.25/vue.js"></script> <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: { someStr: 'hello ', className: 'btn', htmlStr: '<span style="color: #f00;">red</span>', child: { someStr: 'World !' } }, computed: { getHelloWord: function() { return this.someStr + this.child.someStr; } }, methods: { clickBtn: function(e) { var randomStrArr = ['childOne', 'childTwo', 'childThree']; this.child.someStr = randomStrArr[parseInt(Math.random() * 3)]; } } }); vm.$watch('child.someStr', function() { console.log(arguments); }); </script> </body> </html>
相关文章推荐
- 详解Vue双向数据绑定原理解析
- Vue.js解析(三)【从Vue.js源码角度再看数据绑定】
- Vue双向数据绑定原理解析
- Vue源码学习(一)———数据双向绑定 Observer
- vue数据双向绑定原理解析(get & set)
- vue.js双向数据绑定原理解析及模拟demo的实现
- Vue双向数据绑定原理解析
- 全面解析vue中的数据双向绑定
- 通过源码分析Vue的双向数据绑定详解
- Vue.js之视图和数据的双向绑定(v-model)
- 双向数据绑定(angular,vue)
- Vue2.0源码阅读笔记--双向绑定实现原理
- vue双向数据绑定原理探究(附demo)
- Vue.js的组件(四)父组件与子组件的数据联系 之 双向绑定
- vue双向绑定解析
- Vue、AngularJS 双向数据绑定解剖
- Vue双向数据绑定原理分析
- vue.js双向数据绑定
- Vue2.0源码阅读笔记--双向绑定实现原理
- Vue.js学习 Item4 -- 数据双向绑定