Vue3.0加入了watchEffect,刚好项目使用到了,很好用,但是发现了一个现象:watchEffect没有触发ref的数组变化,直接上代码。
代码执行,setTimeout后,console.log没有重新执行。
为什么呢?
因为网上基本查不到有用的资料,我去翻了源码。找到了原因,上代码(我做了简洁化处理)
function ref(value) {
return createRef(value, false);
}
function createRef(rawValue, shallow) {
if (isRef(rawValue)) {
return rawValue;
}
return new RefImpl(rawValue, shallow);
}
class RefImpl {
constructor(value, _shallow) {
this._value = _shallow ? value : toReactive(value);
}
get value() {
trackRefValue(this);
return this._value;
}
set value(newVal) {
newVal = this._shallow ? newVal : toRaw(newVal);
if (hasChanged(newVal, this._rawValue)) {
this._rawValue = newVal;
this._value = this._shallow ? newVal : toReactive(newVal);<