中国领先的IT技术网站
|
|

关于Vue.js的响应式原理

Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持E8 以及更低版本浏览器的原因。

作者:染陌同学来源:染陌同学的博客|2017-08-30 17:10

Tech Neo技术沙龙 | 11月25号,九州云/ZStack与您一起探讨云时代网络边界管理实践


Vue.js响应式原理

写在前面

因为对Vue.js很感兴趣,而且平时工作的技术栈也是Vue.js,这几个月花了些时间研究学习了一下Vue.js源码,并做了总结与输出。

文章的原地址:https://github.com/answershuto/learnVue

在学习过程中,为Vue加上了中文的注释https://github.com/answershuto/learnVue/tree/master/vue-src,希望可以对其他想学习Vue源码的小伙伴有所帮助。

可能会有理解存在偏差的地方,欢迎提issue指出,共同学习,共同进步。

关于Vue.js

Vue.js是一款MVVM框架,上手快速简单易用,通过响应式在修改数据的时候更新视图。Vue.js的响应式原理依赖于Object.defineProperty,尤大大在Vue.js文档中就已经提到过,这也是Vue.js不支持E8 以及更低版本浏览器的原因。Vue通过设定对象属性的 setter/getter 方法来监听数据的变化,通过getter进行依赖收集,而每个setter方法就是一个观察者,在数据变更的时候通知订阅者更新视图。

将数据data变成可观察(observable)的

那么Vue是如何将所有data下面的所有属性变成可观察的(observable)呢?

  1. function observer(value) { 
  2.     Object.keys(value).forEach((key) => defineReactive(value, key, value[key] , cb)) 
  3.  
  4. function defineReactive (obj, key, val, cb) { 
  5.     Object.defineProperty(obj, key, { 
  6.         enumerable: true
  7.         configurable: true
  8.         get: ()=>{ 
  9.             /*....依赖收集等....*/ 
  10.         }, 
  11.         set:newVal=> { 
  12.             cb();/*订阅者收到消息的回调*/ 
  13.         } 
  14.     }) 
  15.  
  16. class Vue { 
  17.     constructor(options) { 
  18.         this._data = options.data; 
  19.         observer(this._data, options.render) 
  20.     } 
  21.  
  22. let app = new Vue({ 
  23.     el: '#app'
  24.     data: { 
  25.         text: 'text'
  26.         text2: 'text2' 
  27.     }, 
  28.     render(){ 
  29.         console.log("render"); 
  30.     } 
  31. })  

为了便于理解,首先考虑一种最简单的情况,不考虑数组等情况,代码如上所示。在initData中会调用observe这个函数将Vue的数据设置成observable的。当_data数据发生改变的时候就会触发set,对订阅者进行回调(在这里是render)。

那么问题来了,需要对app._date.text操作才会触发set。为了偷懒,我们需要一种方便的方法通过app.text直接设置就能触发set对视图进行重绘。那么就需要用到代理。

代理

我们可以在Vue的构造函数constructor中为data执行一个代理proxy。这样我们就把data上面的属性代理到了vm实例上。

  1. _proxy(options.data);/*构造函数中*/ 
  2.  
  3. /*代理*/ 
  4. function _proxy (data) { 
  5.     const that = this; 
  6.     Object.keys(data).forEach(key => { 
  7.         Object.defineProperty(that, key, { 
  8.             configurable: true
  9.             enumerable: true
  10.             get: function proxyGetter () { 
  11.                 return that._data[key]; 
  12.             }, 
  13.             setfunction proxySetter (val) { 
  14.                 that._data[key] = val; 
  15.             } 
  16.         }) 
  17.     }); 
  18.  

我们就可以用app.text代替app._data.text了。

【编辑推荐】

  1. 暑期干货!2017年8月前端开发者超实用干货大合集
  2. 浅谈JavaScript中的接口实现
  3. 实现前端资源增量式更新的一种思路
  4. 浅谈JavaScript中的异步处理
  5. 怎么轻松学习JavaScript
【责任编辑:庞桂玉 TEL:(010)68476606】

点赞 0
分享:
大家都在看
猜你喜欢

读 书 +更多

Java Web标签应用开发

Java Web程序员直接在JSP页面中书写Java代码的做法,使得页面中混杂有JavaScript、HTML、Java等多种语言的程序代码,可读性差,可复用性也...

订阅51CTO邮刊

点击这里查看样刊

订阅51CTO邮刊
× CTO训练营(深圳站)