Vue2.0响应式原理实现

[Believel]

 // Vue2.0响应式原理
        function isObject(obj) {
            return typeof obj === 'object' && obj !== null
        }
        // 针对数组——拦截处理
        const ArrayProto = Array.prototype
        const newArrayProto = Object.create(ArrayProto); // 继承
        ['push', 'pop', 'shift', 'unshift'].forEach(method => {
            newArrayProto[method] = function() { // 函数劫持
                updateView()
                ArrayProto[method].call(this, ...arguments)
            }
        })
        function updateView() {
            console.log('视图更新了~')
        }
        // 观察函数
        function observer (target) {
            if (!isObject(target)) return target;
            // 是数组，调用重写的数组方法
            if (Array.isArray(target)) {
                Object.setPrototypeOf(target, newArrayProto)
                // target.__proto__ = newArrayProto
            }
            // 是对象
            for (let key in target) {
                reactive(target, key, target[key])
            }
        }
        function reactive(target, key, value) {
            // 递归
            observer(value)
            Object.defineProperty(target, key, {
                get: function get() {
                    return value
                },
                set: function set(newValue) {
                    if (value !== newValue) {
                        updateView()
                        value = newValue
                    }
                },
                configurable: true
            })
        }
        let obj = { name: { n: 'zpp'}, age: 100}
        // let arr = [ 1, 2, 3]
        observer(obj)
        obj.name.n = 'tgd'
        // arr.push(4)