文章目录
概要
前面我们写完了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 = effectFn
fn()
effectStack.pop()
activeEffect = effectStack[effectStack.length -1]
}
effectFn.options = options
effectFn.deps = []
if(!options.lazy){
effectFn()
}
return effectFn
}
以上代码,我们可以看到,我们值返回了一个函数,并没有返回副作用函数所执行的结果,我们需要的时副作用函数执行的结果,所以我们在effectFn里面需要返回fn()执行的结果,所以我们需要再次修改一下:
function effect(fn,options={}){
const effectFn = ()=>{
cleanup(effectFn)
effectStack.push(effectFn)
activeEffect = effectFn
const res = fn()
effectStack.pop()
activeEffect = effectStack[effectStack.length -1]
return res
}
effectFn.options = options
effectFn.deps = []
if(!options.lazy){
effectFn()
}
return effectFn
}
这样就可以拿到副作用函数的返回结果了,我们再来看下computed函数应该怎么写,我们先来理一下思路:
- 我们在computed里面调用effect,options带lazy参数,
- 知道了当options里面有lazy的时候,返回的一个函数,所以我们需要定义一个参数来接受它,比如我们可以定为effectFn
- 我们知道在vue3中,访问computed的值的时候我们是使用
.value
的方式,所以我们也需要定义一个对象,当访问这个对象的value的时候,返回effectFn副作用函数的执行结果, - 很重的一定,我们知道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 = null
let dirty = true
cosnt 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 = null
let dirty = true
cosnt 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 = null
let dirty = true
cosnt 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的实现原理