vue2 3响应式原理

vue响应式原理

1. 假装响应式

   const info = {
        
     name: "red",
     age: 18,
   };
   
   // 2.将代码用一个函数包裹，info有改变就执行这个函数
   function fn() {
        
     // 1.这些代码引用了info，info的变化，这些代码需要重新执行。
     console.log(info.name);
     console.log(info.age);
   }
   
   info.name = "blue";
   info.age = 20;
   fn();
   

2. 多个地方引用了info

   // 2.将改变info对象后需要执行的函数用变量储存
   const reactiveFns = [];
   
   // 3.用一个函数往数组添加函数
   function watchFn(fn) {
        
     reactiveFns.push(fn);
   }
   
   const info = {
        
     name: "red",
     age: 18,
   };
   
   watchFn(function fn() {
        
     console.log(info.name);
     console.log(info.age);
   });
   // 1.设有多个地方引用了info
   watchFn(function fn2() {
        
     console.log(info.age * 2);
   });
   
   info.name = "blue";
   info.age = 20;
   // fn();
   // fn2();
   reactiveFns.forEach(fn => {
        
     fn();
   });
   

3. 许多属性都需要具有响应式

   // 2.用类封装，类本身具有更强的封装性。
   class Depend {
        
     constructor() {
        
       // 2.1所有需要响应的函数
       this.reactiveFns = [];
     }
   
     // 2.2添加函数
     addDepend(fn) {
        
       this.reactiveFns.push(fn);
     }
   
     // 2.3通知所有执行的函数 执行。
     notify() {
        
       this.reactiveFns.forEach(fn => {
        
         fn();
       });
     }
   }
   // 3.每个对象对应一个类。
   const depend = new Depend();
   const depend2 = new Depend();
   
   const info = {
        
     name: "red",
     age: 18,
   };
   
   // 1.有多个对象需要具有响应式，那么一个reactiveFns是不够的，此时考虑优化数据结构。
   const info2 = {
        
     name: "green",
     age: 8,
   };
   
   depend.addDepend(function fn() {
        
     console.log(info.name);
     console.log(info.age);
   });
   depend.addDepend(function fn2() {
        
     console.log(info.age * 2);
   });
   
   depend2