vue3响应式的简单实现（vue设计与实现-霍春阳）

这一篇主要讲解VUE3的响应式，这个系列会随着博主的不断学习一直更新
1.首先vue3是通过proxy实现的响应式，先来简单描述proxy
let obj = new Proxy(你要代理的对象，{
	get(target,key){
		target是当前对象,key是键
		return target[key]
	},
	set(target,key,newValue){
		target[key]= newValue
	}
})
2.编写开始
首先我们需要存储所有需要触发的effect桶，也就是集合，
这个集合：
 // WeakMap 由target和Map组合，所有的对象都在这里
  const bucket = new WeakMap();
 // Map由key和set组合

 这个桶设计完毕，然后我们写一个html,点击按钮页面的值需要改变
   <div>
        <span class="content"></span>
        <p class="description"></p>
        <button onclick="modify()">按钮</button>
  </div>

    //需要代理的数据
   const data = { text: 'hello world!', name: 'gq' };
  // 数据集合
  const bucket = new WeakMap();
  //所有触发的函数
  let activeEffect = undefined;
    const obj = new Proxy(data, {
	 get(target, key) {
	  当外界函数获取的数据的时候，将数据丢到桶里面
       track(target, key);
       return target[key];
      },
      修改的时候，再次执行函数
	 set(target, key, newValue) {
	     target[key] = newValue;
	     trigger(target, key);          
	 }
 	})
 	
	function track(target, key){
		如果没有收集到依赖
		if(!activeEffect) return;
		// 这WeakMap中有这个对象吗?
		let  depsMap =  bucket.get(target);
		//没有的话新增一个 由target和Map组合
		if(!depsMap){
			bucket.set(target,(depsMap = new Map()));
		}
		// 这个Map中有这个键吗？
		let deps =  depsMap.get(key);
		// 如果没有
		if(!deps){
			depsMap.set(key,deps = new Set());
		}
		//最后用这个set将这个键放到里面去
		deps.add(activeEffect);
	}

	function  trigger(target, key){
		const depsMap =  bucket.get(target);
		if(!depsMap) return;
		const effects = depsMap.get(key);
		//再次执行getValue这里函数，这个时候由于有newValue
		// 所有页面更新
		effects && effects.forEach(fn=>fn());
	}
	
	 依赖收集，目前只支持单个函数，等下次就会讲到多个
	function effect(fn) {
		  activeEffect = fn;
	   	 fn();
	 }
	 
    function getValue() {
     	document.querySelector('.content').innerHTML = obj.text;
       document.querySelector('.description').innerHTML = obj.name; 
       }
        
       effect(getValue);
       
      修改数据
     function modify() {
            obj.text = 'hello vue3'
            obj.name = 'zs'
     }