Vue3 Watch踩坑实战之watch监听无效

来自:网络
时间:2023-05-17
阅读:
目录

ref 与 reactive

ref函数和reactive函数都是用来定义响应式数据

但是reactive更适合定义引用类型、ref适合定义基本数据类型(可接收基本数据类型和对象)

reactive

1、 深层次响应式,本质是将传入的数据包装成一个Proxy对象

2、 参数必须是对象或者数组,如果要让对象的某个元素实现响应式时,需要使用toRefs,这样每个都需要采用value方式访问

ref

1、函数参数可以是基本数据类型,也可以接受对象类型

2、如果参数是对象类型时,其实底层的本质还是reactive

3、ref响应式原理是依赖于Object.defineProperty()的get()和set()的

watch

在自身组件监听 reactive 对象

let a = reactive({test: 123, bg: 456, hh: {hhh: 78}})
// 定时器 1
setTimeout(() => {
  a.test = 456
}, 2000)
// 定时器 2
setTimeout(() => {
  a.hh.hhh = 56 
}, 4000)
// 定时器 3
setTimeout(() => {
  a = {}  
}, 6000)
// 
watch(a, () => {
  // 定时器1, 2 可以触发监听, 不需要deep也可以
  // 定时器3 不能触发监听, 因为对象的地址已经发生改变了
  console.log("change")
})
// 函数返回方式 采用deep可以监听, 不加deep不能监听 
watch(
  () => a,
  () => {
    console.log(" func change")
  },
  {
     deep: true
  }
)

为什么不加 deep不能监听呢,直接从源码看

  function watch(source, cb, options) {
    if (!isFunction(cb)) {
      warn2(
        `\`watch(fn, options?)\` signature has been moved to a separate API. Use \`watchEffect(fn, options?)\` instead. \`watch\` now only supports \`watch(source, cb, options?) signature.`
      );
    }
    return doWatch(source, cb, options);
  }
function doWatch(source, cb, { immediate, deep, flush, onTrack, onTrigger } = EMPTY_OBJ) {
  // 代码不完整,截取部分
  ... 
   if (isRef(source)) {
      getter = () => source.value;
      forceTrigger = isShallow(source);
    } else if (isReactive(source)) {
      // 这里 ,如果 source 是 reactive
      // 则 deep = true 
      // 而 deep 为true 后面会 执行traverse
      getter = () => source;
      deep = true;
    } else if (isArray(source)) {
      isMultiSource = true;
      forceTrigger = source.some((s) => isReactive(s) || isShallow(s));
      getter = () => source.map((s) => {
        if (isRef(s)) {
          return s.value;
        } else if (isReactive(s)) {
          return traverse(s);
        } else if (isFunction(s)) {
          return callWithErrorHandling(s, instance, 2 /* WATCH_GETTER */);
        } else {
          warnInvalidSource(s);
        }
      });
    } else if (isFunction(source)) {
      // 如果是函数,
      //最终 getter () => fn()
      // deep为false,因此不走 traverse()
      if (cb) {
        getter = () => callWithErrorHandling(source, instance, 2 /* WATCH_GETTER */);
      } else {
        getter = () => {
          if (instance && instance.isUnmounted) {
            return;
          }
          if (cleanup) {
            cleanup();
          }
          return callWithAsyncErrorHandling(
            source,
            instance,
            3 /* WATCH_CALLBACK */,
            [onCleanup]
          );
        };
      }
    } else {
      getter = NOOP;
      warnInvalidSource(source);
    }
    ....
    if (cb && deep) {
      const baseGetter = getter;
      getter = () => traverse(baseGetter());
    }
}

traverse 深度遍历整个对象,深层次的访问其所有的响应式变量,并收集依赖

在自身组件监听 ref 对象

let a = ref({test: 123, bg: 456, hh: {hhh: 78}})
setTimeout(() => {
  a.value.test = 456
}, 2000)
setTimeout(() => {
  a.value.hh.hhh = 56
}, 4000)
setTimeout(() => {
  a.value = {}
}, 6000)
// 注意下面两种写法 一个是 a , 一个是 a.value
// 从源码可知, 如果是 a, 那么走isRef(source)分支, 如果是 a.value 那么走 isReactive(分支)
// 这里不给出结果,动手试试
watch(a.value, (val) => {
  console.log(val, "change")
})
watch(a, (val) => {
  console.log(val, "change")
})
// 如果是 函数返回的方式呢? 其实也分两种,类推即可,同时也需要注意是否需要加 deep 属性
watch(() => a.value, (val) => {
  console.log(val, "change")
})
watch(() => a, (val) => {
  console.log(val, "change")
})

如果在子组件需要监听父组件的数据,同时父组件可以通过v-model双向绑定时需要非常注意,不然可能出现一些bug

如果watch监听无效,根据你的数据结构分析是否是因为写法不正确导致。

总结

返回顶部
顶部