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

淩亂°似流年 2022-12-09 15:51 138阅读 0赞

# 一、手写类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'
    	}
    })

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center]

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

1.  Vue实例中从数据区data中得到的$data中的变量也是具备访问器特性的变量。
2.  为了完成这个功能，需要创建一个新类：Observer  
    ![在这里插入图片描述][2020092222253055.png_pic_center]

//完善上面第四步的代码
    
    
    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
    		}
    	}
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlYl9vbmx5Xw_size_16_color_FFFFFF_t_70_pic_center]: /images/20221123/c4725d73a9a14da68fb5a560d2099325.png
[2020092222253055.png_pic_center]: /images/20221123/4684edb10e744495a5ceb78af00e8da2.png