Subscribe on changes!

watchEffect support options to set dependencies

avatar
Nov 15th 2020

What problem does this feature solve?

We can control which dependencies will track.

Consider this situation, we have filter options like

let filter = reactive({
 foo: 'a',
 bar:'b'
})

when filter change we will pull server data and update the list state. code like this

let filter = reactive({
 foo: 'a',
 bar:'b'
})
let list = ref([]);

watchEffect(async () => {
   let res = await  getDate(filter);

  // this will make watchEffect to track list change, so watchEffect  callback will infinite run.
  list = res;
})

I konw, we can use watch to make it work, but I think use watchEffect may more clear. so we can config which dependency wants track, like react useEffect.

watchEffect(async () => {
   let res = await  getDate(filter);

  // only track filter, so list update will not make wachtEffect loop run .
  list = res;
}, {
deps: [filter]
})

What does the proposed API look like?

watchEffect(cb, {
// which state you want track
deps: [ state1,state2, ... ]

})
avatar
Nov 15th 2020

Use a watch to explicitly define its dependencies, it's even clearer and shorter than the change you proposed with watchEffect