vue.js的设计与实现（响应系统 计算属性computed和lazy）

本文主要是介绍vue.js的设计与实现（响应系统 计算属性computed和lazy），希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

概要

前面我们写完了effect（依赖收集）函数。这一章我们就通过之前写完的effect来实现computed（计算属性）

computed和lazy

在vue3中，computed是经常使用的，现在我们就来用effect来实现它，在此之前，我们先来实现关于懒执行的effect，我们先来举一个例子：

effect(()=>{ //这个函数会立即执行console.log(obj.foo)
})

我们可以在options里面添加一个lazy，来让它达到目的，如下：

effect(()=>{ //这个函数会立即执行console.log(obj.foo)
},{lazy:true,
})

我们在前面并没有对effect的options的lazy参数的处理，既然是懒执行，就是不立即执行effect的参数函数，那我们要什么时候去执行呢？我们可以回想一下 在vue3中的computed的用法：const sum = computed(()=>obj.foo + obj.bar),我们先看，是不是我们还缺少一个computed函数，我们先来定义一个：

function computed (fn){effect(fn,{lazy:true})
}

这样写有没有问题呢？肯定是有的，我们之前写的effect是没有返回值的，所以我们在effect中，当lazy为true时，需要添加一个返回值，我们在上面也说了时懒执行，那就是不立即执行没所以我们可以在effect中把需要执行的函数返回回来，在computed中去执行，如下 ：

function effect(fn,options={}){const effectFn = ()=>{cleanup(effectFn)effectStack.push(effectFn) activeEffect = effectFnfn()effectStack.pop()activeEffect = effectStack[effectStack.length -1]}effectFn.options = optionseffectFn.deps = []if(!options.lazy){effectFn()}return effectFn
}

以上代码，我们可以看到，我们值返回了一个函数，并没有返回副作用函数所执行的结果，我们需要的时副作用函数执行的结果，所以我们在effectFn里面需要返回fn()执行的结果，所以我们需要再次修改一下：

function effect(fn,options={}){const effectFn = ()=>{cleanup(effectFn)effectStack.push(effectFn) activeEffect = effectFnconst res = fn()effectStack.pop()activeEffect = effectStack[effectStack.length -1]return res }effectFn.options = optionseffectFn.deps = []if(!options.lazy){effectFn()}return effectFn
}

这样就可以拿到副作用函数的返回结果了，我们再来看下computed函数应该怎么写,我们先来理一下思路：

1. 我们在computed里面调用effect，options带lazy参数，
2. 知道了当options里面有lazy的时候，返回的一个函数，所以我们需要定义一个参数来接受它，比如我们可以定为effectFn
3. 我们知道在vue3中，访问computed的值的时候我们是使用.value的方式，所以我们也需要定义一个对象，当访问这个对象的value的时候，返回effectFn副作用函数的执行结果，
4. 很重的一定，我们知道computed是具有缓存的，也就是说，我们不是每次获取computed的value值的时候都需要去重新执行副作用函数

先说下1、2、3的代码，这个比较简单，如下：

function computed (fn){cosnt effectFn = effect(fn,{lazy:true})const obj = {get value(){return effectFn()}}return obj
}

重点说下缓存这个点，上面的代码每次访问value值的时候都会重新运行effectFn,如果我们不想重新运行effectFn，是不是需要添加两个参数，一个是判断是否需要重新执行，另一个是保存上次effectFn的执行结果。当判断不需要重新执行的时候，我们只需要返回上次保存的结果就可以了，那我们就修改一下computed函数：

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{lazy:true})const obj = {get value(){if(!dirty){value = effectFn()dirty = false}return value}}return obj
}

看上面的代码，我们又发现了一个问题，当我修改obj.foo或者obj.bar的值的时候，dirty还是false，并不会去执行effectFn,到账拿到的值还是上次的值，这个要怎么办呢？很简单，就是需要用到我们的调度器（scheduler）,如下：

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{lazy:true,scheduler(){dirty = true}})const obj = {get value(){if(!dirty){value = effectFn()dirty = false}return value}}return obj
}

到这里，我们的computed以及趋近完美了，但是还有一个问题，当我们在effect函数中去获取computed的值的时候，当改变了obj.foo的值的时候，并不会重新执行副作用函数，这个是为什么？看一下代码：

const sum = computed(()=>{obj.foo + obj.bar})
effect(()=>{console.log(sum.value)
})

因为当我们使用effect函数去获取computed的value值的时候，这里就是典型的effect嵌套问题，我们的computed又是懒执行，只有当我们去访问value值的时候才会真正的执行,我们再看下computed的函数，当obj.foo或者obj.bar发生变化的时候，我们只是把dirty的值改变，当我们再次去获取computed的value的值的时候才会去重新执行副作用函数，所以看上面的代码，effect(()=>{console.log(sum.value)}),这里依赖搜集的只是 sum->value->effect函数，当我们的sum.value没有变化的时候，是不会重新执行effect函数的。
computed只有读取value的时候才会执行副作用函数，在上面的代码只是打印了sum.value的值，当obj.foo或者obj.bar发送改变的时候。没有重新去获取sum.value的值，所以不能触发effect函数。如下代码

function computed (fn){let value = nulllet dirty = truecosnt effectFn = effect(fn,{lazy:true,scheduler(){dirty = true//当计算属性依赖发生改变的时候，手动去调用触发响应trigger(obj,'value')}})const obj = {get value(){if(!dirty){value = effectFn()dirty = false}//当读取value值的时候，手动去捕获追踪track(obj,'value')return value}}return obj
}

这样就可以了

小结

这里就是vue3中的computed了，我在解释一下上面的代码：effect嵌套computed的时候，我们收集到的是这样的：computed->value->effect，当该白computed里面的计算属性依赖的时候，并不会重新计算computed的value值，因为computed是懒执行的，每次重新获取computed的value值时候才会重新去获取，所以我们需要在第一次去获取computed的value值的时候，就需要手动去追踪，当计算属性依赖响应式数据发生变化的时候，手动去调用追踪到的依赖，这里追踪到的依赖就是()=>{console.log(sum.value)},就会重新去执行这个函数
下一篇，我们来看看watch的实现原理

这篇关于vue.js的设计与实现（响应系统 计算属性computed和lazy）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---