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 = 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函数应该怎么写,我们先来理一下思路：

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 = 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的实现原理