js监听数据的变化

js监听数据的变化

• 一般来说，变量的值为基本数据类型时基本上没有办法去监听数据的变化，例如：

// 定义一个变量
let name = "tom"
// 变量name的值发生了改变
name = "jerry"
// 但是无法进行监听

• 但是呢，变量的值为引用数据类型的时候就监听里面属性的数据变化

let vm = {
	name: "tom"
}
// vm里边的name实际上可以进行监听
Object.keys(vm).forEach(key => {
    definedAttribute(vm, key, vm[key])
})

function definedAttribute(vm, key, val){
    Object.defineProperty(vm, key, {
        enumerable: true,
        configurable: false,
        get(){
            return val
        },
        set(newVal){
            console.log("我监听到了数据的变化")
            if(val !== newVal){
                val = newVal
            }
        }
    })
}

// 更新vm里面的数据
vm.name = "jerry"

// 输出：
我监听到了数据的变化 // 成功进行了监听