vue 中响应式的实现思路

1. javaScript中对象obj的属性的属性值监听

 <script> 
      const obj = {
        name: 'zhangsan',
        age: 18
      }
     
      // 遍历属性的key
      Object.keys(obj).forEach(key =>{
    
        let value = obj[key] 
        
        // 给obj的属性key 添加属性监听
        Object.defineProperty(obj,key,{
          set(newValue){
            console.log(`调用了属性:${key}的set方法了, 新值:${newValue}, 旧值: ${value}`); 
            value = newValue;
          },
          get(){
            console.log(`监听到属性:${key}的值被获取了`); 
            return value;
          }
        })
      })
     
    </script>

2. 在javaScript 中实现 发布者/订阅者模式

<script>  
      // 发布者类
      class Dep{
        // 构造器, 当对象调用new 是就会调用
        constructor(name){
          console.log(`Dep 的构造器被调用了`);
    
          // 订阅的服务名
          this.name = name;
          // 记录订阅者
          this.subs = []
        }
    
        // 添加订阅者 (每个订阅者就是一个Watcher对象)
        addSub(watcher){
          this.subs.push(watcher)
        }
    
        // 发布消息
        notify(){
          this.subs.forEach(watcher=>{
            watcher.update(this.name)
          })
        }
      }
    
    
      // 订阅者者类
      class Watcher{ 
        constructor(name){
          this.name = name;
        }
    
        update(source){
          console.log(`Watcher ${this.name} , 收到了来自${source} 的消息更新通知`);
        }
      }
 </script>

2.1 发布者/ 订阅者应用

 <script>
      // 1. 创建发布者
      const dep1 = new Dep('新华日报')
      const dep2 = new Dep('腾讯新闻')
    
      // 2. 创建订阅者者
      const watcher1 = new Watcher('观察者1')
      const watcher2 = new Watcher('观察者2')
      const watcher3 = new Watcher('观察者3')
    
      // 3. 订阅者向发布者订阅消息
      dep1.addSub(watcher1)
      dep1.addSub(watcher2)
      dep1.addSub(watcher3)
    
      dep2.addSub(watcher1)
      dep2.addSub(watcher2)
      dep2.addSub(watcher3)
    
     // 4. 发布者通知订阅者消息
     dep1.nodify()
     
     dep2.notify()
    
    </script>

3. vue 中响应式的大致实现如下:

   <script> 
    
     const obj = {
       name: 'zhangsan',
       age: 18
     }
    
     // 遍历属性的key
     Object.keys(obj).forEach(key =>{
   
       let value = obj[key] 
       
       // 给obj的属性key 添加属性监听
       Object.defineProperty(obj,key,{
         set(newValue){
           console.log(`调用了属性:${key}的set方法了, 新值:${newValue}, 旧值: ${value}`); 
           
           // 找到这个属性的发布者 发布消息, 告诉外面这个服务内容有变化
           // 响应式实现了
           value = newValue;
         },
         get(){
           console.log(`监听到属性:${key}的值被获取了`); 
           
           // 找到这个属性的发布者, 让使用该数据的人订阅这个服务
           
           return value;
         }
       })
     })
    
   </script>