手写vue 2 响应式原理（非数组）

// vue 2 响应式原理 ==> 对data进行监听 
let data = {
    user_name: 'tom',
    age: 19,
    info: {}
}
observer(data)

// data.age = 20
data.info = {
    sex: 'M',
    height: 170
}
data.info.height = 185
// 观察者
function observer(obj) {
    // 判断是否为对象
    if (typeof obj !== 'object' || typeof obj == null) return
    // 遍历对象 监听对象key值的变化
    for (const key in obj) {
        defineProperty(obj, key, obj[key])
    }
}
// 绑定响应式
function defineProperty(obj, key, value) {
    observer(value)
    Object.defineProperty(obj, key, {
        enumerable: true,
        configurable: true,
        get: function () {
            console.log('触发了getter')
            return value
        },
        set: function (newVal) {
            // if (newVal == value) return
            value = newVal
            // 若newVal是个对象
            observer(newVal)
            runderHtml()
            console.log('触发了setter')
        }
    })
}
function runderHtml() {
    let p = document.querySelector('#p')
    p.innerHTML = data.user_name
}