MVVM模式中如何实现数据监听

Object的defineProperty方法

  • 如何监听一个对象的某个属性被访问了呢?JavaScript提供了相关的机制给我们来实现,那就是设置对象属性的setter方法及getter方法。
let object = {
    name: 'sian',
    age: 18
}

Object.defineProperty(object, 'name', {
    get: function() {
        console.log('获取name的值')
    },
    set: function(value) {
        console.log('设置name的值');
    }
})
  • 现在问题来了,我该如何返回这个属性的值?赋值的时候我又该如何保存该属性的值呢?
let object = {
    name: 'sian',
    age: 18
}
let name;
Object.defineProperty(object, 'name', {
    get: function() {
        console.log('获取name的值')
        return name;
    },
    set: function(value) {
        console.log('设置name的值');
        name = value;
    }
})

问题解决!在外部增加一个变量来保存不就可以了吗?可这样是不是很难看,并且多个属性我都得在外面定义一个变量来保存,这对应关系就会变得非常混乱,维护也是个问题。

defineReactive

function defineReactive(data, key, value) {
    Object.defineProperty(data, key, {
        get: function() {
            console.log(`获取${key}的值:`, value);
            return value;
        },
        set: function(newValue) {
            value = newValue;
            console.log(`设置${key}的值为:`, newValue);
        }
    })
}

// 测试一下
let obj = {
    name: 'sian'
};
defineReactive(obj, 'name', 'sian');
obj.name = 'jack';
console.log('obj.name: ', obj.name);
设置name的值为: jack
获取name的值: jack
obj.name:  jack

利用闭包来解决变量的问题,基础不好的童鞋可能会有点晕了,为什么这样就可以,解释起来会有点复杂,去网上搜索一下闭包相关的知识了解一下然后再慢慢体会。

发表评论