关于面试:面试速记之computed与watch的区别

5次阅读

共计 823 个字符,预计需要花费 3 分钟才能阅读完成。

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 没有执行),就阐明这个实践有问题,

正文完
 0