《深入浅出Vue.js》读书笔记2-Proxy的自我尝试

Posted 2022-04-07 攻城狮寒草

​

1.问题

vue2.x用Object.defineProperty来劫持data数据的getter和setter操作。用这种方式实现了数据的变化侦测响应的功能，不过，Object.defineProperty存在一些天然的缺陷，包括：

1.Object.defineProperty的getter和setter只能侦测一个数据是否被修改，无法跟踪属性的删除和新增，就导致了对象里新增和删除属性无法被侦测到，（用proxy可以解决，Proxy的handler中有十三种劫持方式，比如deleteProperty可以劫持删除的操作）

2.上文 Object变化侦测中的 Observer实现中：

for(let i =0 ;i<keys.length;i++)
   defineReactive(obj,keys[i],obj[keys[i]])

通过遍历为对象的每一个属性设置getter/setter方式有些。。。（感觉不对，但是缺少形容词）。

3.Object.defineProperty存在先天的缺陷，无法监听数组变化，vue2.x使用了 用自己的方法覆盖数组原型的方式实现，于是我们可以捕捉到 push，pop，slice等操作，但是依然存在问题，比如: gplArray[0]=1,这样的操作，无法对数据变化捕获。

2.proxy

概述：Proxy用于修改某些操作的默认行为，等同于语言层面做出修改，所以属于一种”元编程“，即对编程语言进行编程。使用方式，比如:

var obj = new Proxy(, 
  get: function (target, key, receiver) 
    console.log(`getting $key!`);
    return Reflect.get(target, key, receiver);
  ,
  set: function (target, key, value, receiver) 
    console.log(`setting $key!`);
    return Reflect.set(target, key, value, receiver);
  
);
obj.gpl = 1
//  setting gpl!
++obj.gpl
//  getting gpl!
//  setting gpl!
//  2

这个函数defineReactive用来对Object.defineProperty封装，并定义了一个响应式的数据。封装好后，每当从data的key读取数据，get函数被触发，每当往data的key中设置数据时，set函数被触发。

3.用proxy尝试重新实现上面代码

综上所述，以及Object变化侦测中用Object.defineProperty实现的老代码，尝试对Object变化侦测用proxy的方式进行重写。

//Observer
export class Observer 
    constructor (value) 
      this.value = value
      if(!Array.isArray(value))
        this.walk(value)
      
    
    walk(obj) 
      const keys = Object.keys(obj)
      for(let i =0 ;i<keys.length;i++)
        defineReactive(obj,keys[i],obj[keys[i]])
      
    
  
  //Object.defineProperty 的封装
  function defineReactive(data,key,val) 
    if(typeof val === object)
      new Observer(val)
    
    let dep = new Dep();
    Object.defineProperty(data,key,
      enumerable:true,
      configurable:true,
      get:function()
        dep.depend()
        return val;
      ,
      set:function(newVal)
        if(val === newVal)
          return;
        
        val = newVal;
        dep.notify();
      
    )
  
 //Dep
 export default class Dep 
  constructor()
    this.subs = []
  
  addSub(sub)
    this.subs.push(sub)
  
  removeSub(sub)
    remove(this.subs,sub)
  
  depend()
    if(window.target)
      this.addSub(window.target)
    
  
  notify()
    const subs = this.subs.slice()
    for(let i =0;i<subs.length;i++)
      subs[i].update()
    
  

  function remove(arr,item) 
    if(arr.length)
      const index = arr.indexOf(item);
      if(index > -1)
        return arr.splice(index,1)
      
    
  

改写：

由于proxy可以直接监听对象每一个属性，所以dep我改成了Map（【key:[wather,...]】,...）的形式

export default class Dep 
    constructor()
        this.subs = new Map();
    
    addSub(key,watcher)
        let watcherList = this.subs.get(key)||[];
        if(!watcherList.includes(watcher))
            watcherList.push(watcher);
            this.subs.set(key,watcher);
        
    
    removeSub(key)
        this.subs.delete(key)
    
    depend(key)
        if(window.target)
            this.addSub(key,window.target)
        
    
    notify(key)
        let watcherList = this.subs.get(key);
        for(let watcher of watcherList)
            watcher.update()
        
    

 
 
export class Observer 
    constructor (value) 
        this.value = this.defineReactive(value)
    
    static defineReactive(data)
        let dep = new Dep();
        return new Proxy(data,
            get(obj, key) 
                dep.depend(key)
                return Reflect.get(obj, key);
            ,
            set(obj, key, vue.js权威指南读书笔记（第一章）

 vue.js权威指南读书笔记（第二章）
 html 笔记：Vue.js的v-model和简单的自定义输入封装：1。 Vue.js官方教程中的v-model
 html 笔记：Vue.js的v-model和简单的自定义输入封装：2。 v-model的等价
 《深入理解Android2》读书笔记
 《深入理解Android2》读书笔记