面试速记之computed与watch的区别

Posted 2021-09-28 Valar

computed:

show me the code

computed : {

foo() {
    if(this.a>0){ return this.a}
    else { return this.b + this.c }
}

}
data() {

a: 1,
b: 1,
c: 1,

}
计算属性会缓存上一次的计算结果，强调:是上一次而不是所有历史；
每次调用this.foo，是返回上一次的结果还是执行foo函数返回最新的结果?
是靠computed的响应式构造器内部的变量dirty控制，dirty为true就执行foo，返回最新的结果，否则就返回缓存的值，并且每次执行foo以后，都会把dirty还原为false
也就是说 dirty 控制了是否从缓存里读取值，那么什么时候dirty会被修改为true呢?
deps有修改或者新增(方便记忆，并不是新增会触发，而是新增时也会同步的触发dirty的修改)的时候；
computed的响应式构造器内部除了有dirty还有一个deps的数组，数组项是foo这个计算属性的依赖项，注意了，这个依赖不是代码表面上的this.a，this.b，this.c，而是在执行foo函数时，只有触发了某个值的getter，才会被添加到依赖数组，
deps默认为[]，当第一次执行foo函数时，碰到if(this.a)，触发了this.a的getters，就把this.a添加到deps，这时，依赖性里只有this.a，并且同步修改dirty为true，继续执行foo函数，返回最新的结果

伪代码表示就是
假设此时deps里只有this.a

执行this.b=\'2\'
if(!deps.includes(\'this.b\')){
return 上一次的值
}
执行this.a=2，
返回最新的值，

如果刚开始时 this.a=-1，依赖数组里有a,b,c，这个时候this.a=-2，新值和旧值一样，那么会返回上一次的值呢还是会重新计算? 如果返回上一次的值(foo中的console没有执行)，就说明这个理论有问题，