认识Vue源码 （2）-- 手写类Vue框架：Zue

一、手写类Vue框架：zue

class Zue{
	constructor(options){
		//构造函数：this永远指向实例
	}
}

1、在zue实例下创建$el，并指向挂载点

this.$el = document.querySelector(options.el);

2、在zue实例下创建$options，指向zue实例时的选项

this.$options = options || {};

3、在zue实例下创建$data，指向Vue实例的数据区内容

this.$data = options.data || {};

4、将data数据区中的所有变量变为具有访问器特性的变量

class Zue{
	constructor(options){
		this.$options = options || {};
		this.$el = document.querySelector(options.el);
		this.$data = options.data || {};
		this.proxyData(this.$data);	//this.$data或options.data
	}
	proxyData(data){
		//代理数据：将data数据区中的变量变为访问器特性的数据
		//将数据都注入到实例中
		Object.keys(data).forEach(key=>{
			Object.defineProperty(this,key,{
				enumberable:true,
				configurable:true,
				get:function(){
					return data[key];
				},
				set:function(newValue){
					if(data[key] === newValue) return;
					data[key] = newValue;
				}
			})
		})
	}
}




var zm = new Zue({
	el:'#app',
	data:{
		cont:100,
		isOk:true,
		message:'zanilia'
	}
})

二、将注入到实例下$data中的数据编程具备访问器特性的数据（如上图所示）：

1. Vue实例中从数据区data中得到的$data中的变量也是具备访问器特性的变量。
2. 为了完成这个功能，需要创建一个新类：Observer
   

//完善上面第四步的代码


class Zue{
	constructor(options){
		this.$options = options || {};
		this.$el = document.querySelector(options.el);
		this.$data = options.data || {};
		this.proxyData(this.$data);	//this.$data或options.data
		//创建Observer类的实例
		new Observer(this.$data)
	}
	proxyData(data){
		//代理数据：将data数据区中的变量变为访问器特性的数据
		//		   将data注入到实例中
		console.log(Object.keys(data))
		Object.keys(data).forEach(key=>{
			Object.defineProperty(this,key,{
				enumberable:true,
				configurable:true,
				get:function(){
					return data[key];
				},
				set:function(newValue){
					if(data[key] === newValue) return;
					data[key] = newValue;
				}
			})
		})
	}
}

//Observer类：将注入到实例下$data中的数据变为具有访问器特性的数据
class Observer{
	constructor(data){	//data:接收Zue构造函数中的this.$data
		this.walk(data)
	}
	//遍历data中的数据
	//Object.keys(data).forEach(...)
	walk(data){
		if(typeof data !== 'object'){
			//如果要遍历的数据不是对象则直接return返回，不执行后面的代码
			return;
		}
		Object.keys(data).forEach(key=>{
			this.defineReactive(data,key,data[key])
		})
	}
	//将walk()方法遍历出来的数据变访问造器数据
	//Object.defineProperty(...)
	defineReactive(obj,key,val){
		let _this = this;
		this.walk(val);
		Object.defineProperty(obj,key,{
			enumberable:true,	//可枚举性，
			configurable:true,	//可遍历性，
			get(){
				return val
			},
			set(newValue){
				if(val === newValue) return;
				val = newValue;
				_this.walk(newValue);
			}
		})
	}
}

var zm = new Zue({
	//创建Zue实例时{}内容将传递给构造函数的options属性
	el:'#app',
	//创建Zue实例时的原始数据区
	data:{
		cont:100,
		isOk:true,
		message:'zanilia',
		obj:{
			a:10,
			b:20,
			c:30
		}
	}
})