Vue学习之源码分析--Vue.js响应式原理(一)
2017-10-19 15:59
495 查看
关于Vue.js
Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持IE8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。将数据data变成可观察(observable)的
那么Vue是如何将所有data下面的所有属性变成可观察的(observable)呢?function observer(value, cb) { Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) } function defineReactive (obj, key, val, cb) { Object.defineProperty(obj, key, { enumerable: true, configurable: true, get: ()=>{ /*....依赖收集等....*/ /*Github:https://github.com/answershuto*/ }, set:newVal=> { cb();/*订阅者收到消息的回调*/ } }) } class Vue { constructor(options) { this._data = options.data; observer(this._data, options.render) } } let app = new Vue({ el: '#app', data: { text: 'text', text2: 'text2' }, render(){ console.log("render"); } })
为了便于理解,首先考虑一种最简单的情况,不考虑数组等情况,代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set,对订阅者进行回调(在这里是render)。
那么问题来了,需要对app._data.text操作才会触发set。为了偷懒,我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要用到代理。
代理
我们可以在Vue的构造函数constructor中为data执行一个代理proxy。这样我们就把data上面的属性代理到了vm实例上。_proxy(options.data);/*构造函数中*/ /*代理*/ function _proxy (data) { const that = this; Object.keys(data).forEach(key => { Object.defineProperty(that, key, { configurable: true, enumerable: true, get: function proxyGetter () { return that._data[key]; }, set: function proxySetter (val) { that._data[key] = val; } }) }); }
我们就可以用app.text代替app._data.text了。
相关文章推荐
- Vue学习之源码分析--Vue.js依赖收集(二)
- Vue学习之源码分析--Vue.js异步更新DOM策略及nextTick(八)
- Vue学习之源码分析--从template到DOM(Vue.js源码角度看内部运行机制)(九)
- Vue学习之源码分析--从Vue.js源码角度再看数据绑定(三)
- vue 源码深入学习分析——史上超详细
- Vue.js 源码学习笔记 -- 分析前准备2 -- Object.defineProperty
- Vue学习之源码分析--Vue.js事件机制(四)
- Vue学习之源码分析--VNode节点(Vue.js实现(五)
- Vue学习之源码分析--Virtual DOM与diff(Vue.js实现)(六)
- Vue.js 源码学习笔记 -- 分析前准备1 -- vue三大利器
- Vue学习之源码分析--聊聊Vue.js的template编译(七)
- nginx 源码学习笔记(七)——内存分配相关源码分析
- Mysql源码学习——词法分析MYSQLlex
- cocos2D-X源码分析之从cocos2D-X学习OpenGL(19)----旋转表示法
- GoAhead 2.1.8嵌入式webserver源码分析学习(三)---main函数分析
- java8学习之groupingBy源码分析
- Android 内核学习之三-----Power源码分析学习(2)
- quartz 2.2.x 源码学习 基本执行流程分析
- java util包学习(5) Vector 源码分析
- 开源中国android客户端源码分析-学习笔记1