Vue.js响应式原理

本文和大家分享的主要是Vue.js 响应式原理相关内容，一起来看看吧，希望对大家 学习Vue.js有所帮助。

　　 关于Vue.js

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

　　 将数据data变成可观察（observable）的

　　那么Vue 是如何将所有 data 下面的所有属性变成可观察的（ observable ）呢？

　　 function  observer(value) {

　　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: ()=>{

　　/*.... 依赖收集等 ....*/

　　},

　　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._date.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 了。 .js

来源： 稀土掘金