手写vue3响应系统

电玩女神 2023-09-28 12:27 130阅读 0赞

**目录**

1.目标：

2.原理

3.实现代码

4.小结：

--------------------

#### 1.目标： ####

假设我现在有一个对象obj

let obj = {text:"hello 小明"}

还有一个函数effect

function effect (){
    //document.body.innerHTMl看作是页面上的值
      document.body.innerHTMl = obj.text
    }

我们希望修改值obj.text = "hello vue3"时，effect函数页执行，使得页面数据发生变化

想要的效果是修改obj.text的值，页面也跟着变化，这就是响应式。

再明确一下目标：修改对象的值，使页面自动更新我们修改的最新值（数据）

--------------------

#### 2.原理 ####

vue2使用的是obj.defineproperty函数实现，而vue3使用的proxy代理对象实现，这里使用proxy。

完成上述的目的有两个重要的信息：

第一个时当执行effect的时候会触发obj.text的读取操作

第二个是当修改obj.text的时候会触发obj.text的设置操作

当然，重头戏就是代理对象proxy来实现了

--------------------

#### 3.实现代码 ####

const bucket = new Set() //类数组结构，用来存储effect函数
    
    const data = {text:"hello xiaoming"} //原始数据
    
    const obj = new Proxy(data,{
    
        //拦截读取操作
        get(target,key){
        //将effect添加到bucket
        bucket.add(effect)
        //返回属性值
        return targrt[key]
        
             },
        //拦截设置操作
        set(target,key,newval){
    
        //设置属性值
        target[key] = newval
        //把effect从bucket中取出来并执行
        bucket.forEach(fn => fn())
        //返回true代表设置成功
        return true
        }
    
    })

接下来执行以下看效果

function effect(){
        document.body.innerHTML = obj.text
    }
    
    effect()//执行
    
    //过1秒后执行修改，看看页面是否变化
    
    setTimeout(()=>{
        obj.text = "看看修改成功了没有"
    }，1000)

ps：肯定有人疑问为啥bucket是干嘛的，其实就是为了实现页面变化，细品一下。

这个bucket的作用就是修改dom元素使页面及时变化

要理解proxy”代理“这两个字，举个简单的例子，本来有一个苹果，但是想要的是苹果汁，那么在苹果变成苹果汁的过程可以看作被代理了，这么理解的话，proxy就很容易理解了。

--------------------

#### 4.小结： ####

到目前为止，响应式数据完成了，但是不够完善，但这就是响应式原理的最简单实现代码。后续我会写一个完善版的响应式文章。

在上面，我们创建了一个存储副作用的桶bucket,他是set类型。接着定义原始数据类型data,obj是原始数据的代理对象，我们分别设置了get 和 set拦截函数，用于拦截和读取操作。当读取属性时将副作用effect函数放到桶里，即bucket.add(effect)，然后返回属性值。当设置属性值时先更新原始数据，然后将副作用函数从桶里取出来并且执行，这样我们就实现了响应式数据。