监听函数

/**
 * 监听函数
 * @param {对象} vm 
 * @param {键值} key 
 * @param {触发函数} action 
 */
function WatchValueChange(vm, key, action) {
    var val = vm[key]
    Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val
        },
        set(newVal) {
            action()
            if (val !== newVal) {
                val = newVal
            }
        }
    })
}

使用用例

var testObj = {
    index: 0
}

/**
 * 监听函数
 * @param {对象} vm 
 * @param {键值} key 
 * @param {触发函数} action 
 */
function WatchValueChange(vm, key, action) {
    var val = vm[key]
    Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val
        },
        set(newVal) {
            action()
            if (val !== newVal) {
                val = newVal
            }
        }
    })
}

WatchValueChange(testObj, 'index', () => {
    console.log('我是监听函数')
})
// definedAttribute(testObj, 'index', 0, testFunction)

// testObj.index = 0
for (var i = 0; i < 10; i++) {
    testObj.index++
    console.log(testObj.index)
}

打印

重复添加函数，只有最后一个监听函数有效

var testObj = {
    index: 0
}

/**
 * 监听函数
 * @param {对象} vm 
 * @param {键值} key 
 * @param {触发函数} action 
 */
function WatchValueChange(vm, key, action) {
    var val = vm[key]
    Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: true,
        get() {
            return val
        },
        set(newVal) {
            action()
            if (val !== newVal) {
                val = newVal
            }
        }
    })
}

WatchValueChange(testObj, 'index', () => {
    console.log('我是监听函数')
})

WatchValueChange(testObj, 'index', () => {
    console.log('我是另一个监听函数')
})
// definedAttribute(testObj, 'index', 0, testFunction)

// testObj.index = 0
for (var i = 0; i < 10; i++) {
    testObj.index++
    console.log(testObj.index)
}