triggerRef not working at all

[basvanmeurs]

Version

3.0.0-beta.14

Reproduction link

https://codepen.io/basvanmeurs/pen/vYNvOgZ

Steps to reproduce

Just try to use a ref. It doesn't trigger anything..

What is expected?

'Updates' should be '1'

What is actually happening?

'Updates' is still 0

[aztalbot]

Is it because watch doesn't run until the component mounts? I tried with watchEffect in your repro and I see "Updates: 1".

[basvanmeurs]

Thanks aztalbot, I think you're right!

[RobbinBaauw]

I think triggerRef might not work with watch at all (outside of components). Added the following test case which fails:

  test('triggerRef with watch', () => {
    const a = ref(1)
    let aTriggered = false
    watch(a, () => {
      aTriggered = true
    })
    triggerRef(a)
    expect(aTriggered).toBe(true)
  })

I think it should pass... Thoughts?

[LinusBorg]

I think it should pass...

No, it should fail.

watch() callbacks are run async, on the next Tick. Otherwise, each synchronous change of a watched reactive dependency would trigger the watcher, which in 99% of scenarios you don't want.

this test will pass:

import { nextTick } from 'vue'
test('triggerRef with watch', async () => {
    const a = ref(1)
    let aTriggered = false
    watch(a, () => {
      aTriggered = true
    })
    triggerRef(a)

    await nextTick()  

    expect(aTriggered).toBe(true)
  })

Relevant test in the source:

https://github.com/vuejs/vue-next/blob/34128939c5abc6b85ab82a270692509283066eda/packages/runtime-core/__tests__/apiWatch.spec.ts#L56-L70

[RobbinBaauw]

If I run this test it fails (based on 34128939c5abc6b85ab82a270692509283066eda):
yarn test packages/runtime-core/__tests__/apiWatch.spec.ts -t "triggerRef with watch"

  ● api: watch › triggerRef with watch

    expect(received).toBe(expected) // Object.is equality

    Expected: true
    Received: false

      46 |     await nextTick()
      47 | 
    > 48 |     expect(aTriggered).toBe(true)
         |                        ^
      49 |   })
      50 | 
      51 |   it('watching single source: getter', async () => {

      at Object.<anonymous> (packages/runtime-core/__tests__/apiWatch.spec.ts:48:24)

A very similar watch in my codebase isn't called either, though that could still be a layer 8 problem :)

[yyx990803]

watch does not trigger because the value of active (or of count in the latter case) did not change. In other words - triggerRef did trigger the watch's source to be re-evaluated (accessing count.value), but it re-evaluated to the same value.

watchEffect, on the other hand, always re-run its function because there is no "source value" to compare.

Anyway, the examples shown here seems a bit meaningless in practice: why would you want to force trigger something that you know did not change?

[RobbinBaauw]

Some excerpts from the codebase I'm working on:

function onClickNow() {
    manualScrollStartX.value = 0;
    triggerRef(manualScrollStartX);
}

watch(manualScrollStartX, (x) => {
    // Something with this scroll
});

The value of manualScrollStartX may or may not be 0 already, but in any case I want the watcher to be triggered. There are certainly different & likely better ways to do it but it is just what I expected (so my assumptions about triggerRef were wrong). I guess the docs will probably highlight that triggerRef only makes sense with watchEffect (in a similar case).

[yyx990803]

I'd say the problem here is that it doesn't make sense to want watch to run even if a watched value didn't change. You should just move the callback into a named function and call it in onclickNow.

[RobbinBaauw]

That would indeed be a better solution (although it doesn't solve it in the codebase as the watcher is still needed for other cases), thanks for clearing things up about triggerRef!