vue data监听

数据驱动视图
1.深度监听，需要递归到底，一次性计算量大
2.一开始没有初始化，后期无法监听新增属性和删除属性（vue.set, vue.delete）
3.数组的原生操作，set监听不到变化，需要重写数组监听方法

const oldArrayProperty = Array.prototype;
const arrProto = Object.create(oldArrayProperty)
['push', 'pop', 'shift', 'unshift', 'slice', 'splice'].forEach((methodName) => {
    arrProto[methodName] = function(){
        updateView();
        oldArrayProperty[methodName].call(this, ...arguments)
    }
})

function defineReactive (target, key, value) {
    observer(value)
    Object.defineProperty(target, key, {
        get () {
            return value;
        },
        set (newValue) {
            if (newValue != value) {
                observer(newValue)
                value = newValue
                updateView()
            }
        }
    })
}

function observer(target) {
    if (typeof target !== 'object' || target == null) {
        return target
    }

    if (Array.isArray(target)) {
        target.__proto = arrProto;
    }

    for (let key in target) {
        defineReactive(target, key, target[key])
    }
}

const data = {
    name: 'zhangsan',
    age: 20,
    info: {
        address: 'beijing'
    },
    nums: [1,2,3]
}

observer(data)