vue双向绑定（响应式）简单理解

相信很多人都知道双向绑定原理是基于Object.defineProperty实现的，通过该方法将对象的属性转化为getter/setter，进而实现响应式，（顺便提一句该方法在低版本的浏览器没有很好的支持，所以这也是ie8以下不支持vue的原因），话不多说，下面来一步步实现吧！

首先我们定义一个对象，一个girl:

let girl = {}
let height = '1.70m'
Object.defineProperty(girl, 'height', {
  get: () => {
    console.log(`height属性被获取了`);
    return height
  },
  set: (newVal) => {
    console.log(`height属性被修改了`);
    height = newVal
  }
})

下面当我们操作对象girl的height属性的时候，她已经可以实现主动通知对应的属性被获取或者修改了：

girl.height
height属性被获取了
"1.70m"
girl.height = '1.80m'
height属性被修改了
"1.80m"

借助object.defineProperty方法我们已经实现了对象的可观察了，如果有对该方法不了解的学可以参考mdn上面的介绍
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Object/defineProperty
，刚刚只是实现了对对象的某一个属性实现了可观察了，要是想实现对一个对象的所有属性可观察还不行，下面我们来修改下代码，声明一个方法observe（观察）：

function observe(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: ()=>{
            console.log(`${key}属性被获取了`);
            return val
        },
        set:newVal=> {
            console.log(`${key}属性被修改了`);
            val = newVal;
            // cb();
        }
    })
}

下面我们再来创建一个girl，这一次我们多声明几个她的属性，并调用下observe方法，将她的所有属性都实现可观测：

let girl = { height: '1.7m', weight: '48kg', whole: '90分'}
observe(girl)
girl.height = '1.64m'
height属性被修改了
1.64m
girl.weight = '50kg'
weight属性被修改了
50kg
girl.whole = '94分'
10 whole属性被修改了
94分
girl.whole
whole属性被获取了
94分

到此，我们已经实现了数据的可观测了，下面我们来将代码丰富下：

class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data, options.render);
    }
}

function observe(value, cb) {
    Object.keys(value).forEach((key) => defineReactive(value, key, value[key], cb));
}
function defineReactive(obj, key, val, cb){
    Object.defineProperty(obj, key, {
        get: ()=>{
            console.log(`${key}属性被获取了`);
            return val
        },
        set:newVal=> {
            console.log(`${key}属性被修改了`);
            val = newVal;
            cb();
        }
    })
}
let app = new Vue({
    el: '#app',
    data: {
        text: 'text',
        text1: 'text1'
    },
    render(){
        console.log("render");
    }
})

有没有发现什么，现在当我们访问app._data.text或者修改它的时候，已经实现可观察了：

app._data.text
text属性被获取了
"text"
app._data.text = '哈哈'
text属性被修改了
"哈哈"

是不是已经有点那么个意思了，可能不少人又问了，平常用vue，都是app.data直接修改的啊，别急，下面我们来简单代理下，增加一个代理方法，然后在类vue的原型里面调用下：

function _proxy (data) {
    const _this = this;
    Object.keys(data).forEach(key => {
        Object.defineProperty(_this, key, {
            get: function proxyGetter () {
                return _this._data[key];
            },
            set: function proxySetter (val) {
                _this._data[key] = val;
            }
        })
    });
}
class Vue {
    constructor(options) {
        this._data = options.data;
        observe(this._data, options.render);
        // 代理data下
        _proxy.call(this, options.data);
    }
}

下面我们再来试试：

image

到此简单响应式我们已经实现了，下面我们简单总结下，Vue通过设定对象属性的 setter/getter 方法来监听数据的变化，通过getter进行依赖收集(后面依赖收集篇章会讲到)，而每个setter方法就是一个观察者，在数据变更的时候通知订阅者更新视图，大家想想上面代码里面render方法的作用！

希望这篇文章对大家有帮助，如果发现有任何错漏的地方，也欢迎向我指出，谢谢大家~(鄙人才疏学浅，如有理解不到或是错误的地方还望各位看客见谅)

vue双向绑定（响应式）简单理解

你可能感兴趣的:(vue双向绑定（响应式）简单理解)