Vue学习-Vue2响应式原理的简单实现

Vue2响应式原理的简单实现

 let data = {
        name: 'xm',
        age: 18,
    }
//变成响应式数据
    observer(data)//定义一个observer方法监听数据

    function observer(target) {
        if (typeof target !== 'object' || target === null) {//判断是否是对象或者为空
            return target;
        }
        
        for (let key in target) {
            defineReactive(target, key, target[key])//将数据以及对应的属性和属性值传入
        }
    }
    function defineReactive(target, key, val) {
        //Object.defineProperty() 和 ES2015 中新增的 Proxy 对象,会经常用来做数据劫持.
        //数据劫持:在访问或者修改对象的某个属性时，通过一段代码拦截这个行为，进行额外的操作或者修改返回结果.
        //Object.defineProperty()方法会直接在一个对象上定义一个新属性，或者修改一个对象的现有属性，并返回这个对象
        Object.defineProperty(target, key, {
            get() {
                return val;
            },
            set(newVal) {
                if (newVal !== val) {
                    val = newVal;
                    console.log('更新视图');
                }
            }
        })
    }
    data.name='xw'

但当data 的数据复杂一点，比如有一个属性是对象，就会出现以下情况：

let data = {
        name: 'xm',
        age: 18,
        hobby: {
            sports: '跑步'
        },
    }
	data.hobby.sports = '游泳'//会发现没更新视图，通过上面对key的输出可以发现sports并没有被传入，自然也就无法被监听到修改了
    console.log(data);//可以发现sports被修改了但视图没更新
    Reflect.deleteProperty(data,'age')//将data的age属性删除，视图却没有更新，因为Object.defineProperty无法处理属性删除和属性新增的情况。
    Reflect.set(data,'weight',120)
    console.log(data);
    //这些情况就要用Vue.delete和Vue.set，Vue的重写方法

那自然可以想到对监听数据的属性也进行监听，对defineReactive（）进行修改:

function defineReactive(target, key, val) {
        observer(val)//对属性值继续监听，深度监听，那么自然在数据很复杂的情况下就很有可能导致页面卡顿等情况
        Object.defineProperty(target, key, {
            get() {
                return val;
            },
            set(newVal) {
                observer(newVal)//对新设置的属性值也要监听，以免出现比如将age设置成对象的情况导致没有被监听视图就不更新了
                if (newVal !== val) {
                    val = newVal;
                    console.log('更新视图');
                }
            }
        })
    }

优化一下，不对defineReactive进行修改，转而修改observer（）：

function observer(target) {
        if (typeof target !== 'object' || target === null) {//判断是否是对象或者为空
            return target;
        }
        
        for (let key in target) {
            if (typeof target[key] === 'object') {
                // 当对象里面嵌套对象的时候，可以再次遍历这个对象
                observer(target[key]);
            }
            else {
                defineReactive(target, key, target[key]);
            }
        }
    }

那如果data有一个数组属性的话也会出现问题：

//属性中有数组
let data = {
        name: 'xm',
        age: 18,
        hobby: {
            sports: '跑步'
        },
        owns: ['汽车', '房子']
    }

    data.owns[0]='电脑'//通过数组索引可以更新视图
    data.owns.push('空调')//没有更新视图，原生Array的方法没有更新视图的逻辑，需要特殊处理

解决办法：

	const oldArrayProto = Array.prototype;//保存老的Array原型
    const newArrayProto = Object.create(oldArrayProto);//创建一个新的数组原型
    ['push', 'pop', 'shift', 'unshift', 'splice'].forEach(methodName => {
        	newArrayProto[methodName] = function () {//将常用的数组方法作为属性初始化
            console.log('更新视图');
            //执行原本的方法
            oldArrayProto[methodName].call(this, ...arguments);
        }
    })
    //控制台查看两者，区别也很明显，oldArrayProto是数组，而newArrayProto是对象，方法是它的属性，通过上面的代码可以对对象进行监听。
    console.log(oldArrayProto);
    console.log(newArrayProto);
	//并对observer进行修改，增加一个判断是否是数组
	function observer(target) {
        if (typeof target !== 'object' || target === null) {//判断是否是对象或者为空
            return target;
        }
        //判断如果传入的是数组，就将新定义的数组原型挂载上去
        if (Array.isArray(target)) {
            target.__proto__ = newArrayProto
        }

        for (let key in target) {
            if (typeof target[key] === 'object') {
                // 当对象里面嵌套对象的时候，可以再次遍历这个对象
                observer(target[key]);
            }
            else {
                defineReactive(target, key, target[key]);
            }
        }
    }

	data.owns.push('空调')//更新视图