Vue响应式数据原理

在学习Vue响应式数据原理之前，需要先了解一下 Object.defineProperty() 这个方法

1.Object.defineProperty()

参数一：要定义属性的对象
参数二：要定义或修改的属性的名称
参数三：要定义或修改的属性描述符
注意：get和set不能和其他属性一起使用

var obj = {};
var val = null;
Object.defineProperty(obj ,'a',{
	//value:10,			//设置值
	//configurable:true,	//是否可删除
	//enumerable:true,	//是否可枚举
	//writable:true,		//是否可写
	get(){
		return val;
	},					//getter访问器
	set(newValue){
		val = newValue;
	}					//settter访问器
})

实现definedReactive 函数

var definedReactive = function(data,key,value){
	if(arguments.length==2) value=data[key];
	Object.definedPortotype(data,key,{
		get(){
			return value;
		},
		set(newVal){
			if(value!=newVal){
				value= newVal;
			}
		}
	})
}

2.vue实现响应式数据原理

2.1 实现循环递归调用方法创建Observer对象

function observe(value){
	if(typeof value !=='object') return;
	var ob;
	if(typeof value.__ob__ !=='undefined'){
		ob = value.__ob__;
	}else{
		ob = new Observer(value);
	}
	return ob;
}

//Observer类是将一个正常的object转换为每个层级的属性都是响应式的object
class Observer{
	constructor(value){
		this.dep = new Dep();
		def(value,'__ob__',this,false);
		if(Array.isArray(value)){
			//重写数组方法，需要修改原型链继承
			Object.setPrototypeOf(value, arrayMethods);
			this.observeArray(value);
		}else{
			this.walk(value);
		}
	}
	observeArray(arr){
		for(let i=0;i<arr.length;i++){
			observe(arr[i]);
		}
	}
	walk(value){
		for(let k in value){
			definedReactive(value,k);
		}
	}
}
//创建dep管理数据依赖
function def(object, key, value, enumerable) {
  Object.defineProperty(object, key, {
    value,
    enumerable,
    writable: true,
    configurable: true
  })
}

var definedReactive = function(data,key,value){
	if(arguments.length==2) value=data[key]
	let childOb = observe(value);
	Object.definedPortotype(data,key,{
		get(){
			if (Dep.target) {
                dep.depend();
                if (childOb) {
                    childOb.dep.depend();
                }
            }
            return value;
		},
		set(newVal){
			if (val === newValue) {
                return;
            }
            val = newValue;
            // 当设置了新值，这个新值也要被observe
            childOb = observe(newValue);
			dep.notify();
		}
	})
}

2.2 对数组方法进行重写

Object.definedPortotype()无法检测数组的push,shift,pop,unshift,splice,sort,reverse这些方法，需要重新写这些方法

利用 Object.setPrototypeOf() 修改原数组指向我们重新写的arrayMethods

//arrayMethods拷贝原数组上的方法重写
const arrayPrototype = Array.prototype;
const methodsNeedChange = [
	'push',
    'pop',
    'shift',
    'unshift',
    'splice',
    'sort',
    'reverse'
]
methodsNeedChange.forEach(methodName=>{
	const original = arrayPrototype[methodName];
	def(arrayMethods,methodName,function(){
		 //函数返回值不能修改
		 cosnt result = original.apply(this.arguments);
		 
		 cosnt args = [...arguments];
		 //ob就是Observer对象
		 cosnt ob = this.__ob__;
		 //push\unshift\splice能够插入新项,新项也要变为Observer对象
		 let inserted = [];
		 switch(methodName){
			case 'push':
			case 'unshift':
				inserted  = args;
				break;
			case 'splice':
				insterted = args.slice(2);
				break;
		 }
		 //判断有没有要插入的新项，让新项也变为响应的
		 if(inserted){
		 	// 数组的特殊遍历
		 	ob.observeArray(inserted)
		 }
		 return result;
	},false)
})

2.3 创建Dep收集依赖

class Dep(){
	constructor(){
		// 存放Watcher实例
		this.subs = [];
	}
	addSub(sub){
		this.subs.push(sub);
	}
	depend(){
		//Dep.target就是一个我们自己指定的全局的位置
		if (Dep.target) {
            this.addSub(Dep.target);
        }
	}
	notify() {
        // 浅克隆一份
        const subs = this.subs.slice();
        // 遍历
        for (let i = 0, l = subs.length; i < l; i++) {
            subs[i].update();
        }
    }
}

2.4 创建watcher订阅类

class Wathcer{
	//目标元素，表达式，回调函数
	constructor(target, expression, callback){
		this.target = target;
		this.getter = parsePath(expression);
		this.callback = callback;
		this.value = this.get();
	}
	update() {
        this.run();
    }
	get(){
		Dep.target = this;
		const obj = this.target;
		var value;
		try {
            value = this.getter(obj);
        } finally {
            Dep.target = null;
        }
        return value;
	}
	run() {
        this.getAndInvoke(this.callback);
    }
    getAndInvoke(){
		const value = this.get();
		if (value !== this.value || typeof value == 'object') {
            const oldValue = this.value;
            this.value = value;
            cb.call(this.target, value, oldValue);
        }
	}
}

function parsePath(str) {
    var segments = str.split('.');

    return (obj) => {
        for (let i = 0; i < segments.length; i++) {
            if (!obj) return;
            obj = obj[segments[i]]
        }
        return obj;
    };
}

Observer对象：vue中的数据对象在初始化过程中转为Observer对象
Watcher对象：将模板和Observer对象集合在一起生成Watcher实例，Watcher是订阅者中的订阅者
Dep对象：Watcher对象和Observer对象之间纽带，每一个Observer都有一个Dep实例，用来存储订阅者Watcher

流程：
1.通过observe方法与defineReactive方法将相关对象转为Observer对象（__ ob __属性是用来存储Observer对象的）
2.模板编译过程中，通过Watcher对象，Dep对象与观察者模式模板中的指令与对象数据建立依赖，使用全局对象Dep.target实现依赖收集
3.数据变化，setter被调用，执行dep.notify()方法。遍历数据依赖列表，执行器update方法通知Wathcer执行run（回调函数传递新值）进行视图更新

3.Vue2和Vue3响应式数据原理的区别

Vue2的响应式
对象：通过defineProperty对对象的已有属性值的读取和修改进行劫持（监视/拦截）
数组：通过重写数组更新数组一系列更新元素的方法来实现元素修改的劫持
问题：

1.对象直接新添加的属性或删除已有属性，页面不会自动更新
2.直接通过下表替换元素或更新length，界面不会自动更新
3.需要递归处理对象的属性

Vue3的响应式
通过proxy（代理）：拦截对data任意属性的任意操作，包括属性值的读写，添加删除等
通过Reflect（反射）：动态对被代理对象的相应属性进行特定操作