How to reproduce watch approach

[Alexufo]

I have var that depends on another var. In normal vue we have watch method. What I should do for that?

[nooooooom]

You may need to use @vue/reactivity，Because petite-vue does not open reactive api, or you can define one yourself，I wrote a rough like that🧐.

const defaultWatcherValue = Symbol()
ctx.scope.$watch = (
    expOrFn: string, 
    cb: any, 
    options?: {
      immediate?: boolean
    }
  ) => {
  let lastValue: any = defaultWatcherValue

  ctx.effect(() => {
    const value = evaluate(ctx.scope, expOrFn);
    const isActive =
      lastValue === defaultWatcherValue ? options?.immediate : value !== lastValue
      
    if (isActive) {
      cb.call(ctx.scope, value, lastValue)
    }

    lastValue = value
  })
}

But it will be easier to use @vue/reactivity

[7iomka]

@nooooooom, how to use that?
For example I have getter that depends on another changeable properties.
My goal is to get previous value when new value is available.
How to do that?
Thanks!

[niutech]

An easier way is to use a getter in the scope, e.g. for a square number:
<div v-scope="{number: 0, get squareNumber() { return this.number * this.number; } }"><input id="number" type="number" v-model="number"><output for="number">{{squareNumber}}</output></div>

or another approach:

<div v-scope="{number: 0, squareNumber: 0}"><input id="number" type="number" v-model="number" v-effect="squareNumber = number * number"><output for="number">{{squareNumber}}</output></div>

[abulka]

The lack of watch() support in petite-vue means I can't create a component which wraps a complex third party component and call methods on that third party component in response to model changes. Looks like I'll need to switch to proper vue, which is a pity.

Sure I can use data setters to intercept local data changes but I really want to intercept changes to a global-state-management reactive model. Like @7iomka, I don't understand the solution offered by @nooooooom - any chance of a simple plain javascript (not typescript) - not sure what ctx is? As for using @vue/reactivity - how would that be done, and would it be compatible with reactive which is already exposed by petite-vue?

P.S. Somebody (more knowledgable than me) should ideally create a pull request to update the README re what is not supported by petite-vue. Saying "ref(), computed() etc." is pretty vague - watch() should be added to that list.

[PetesBreenCoding]

Would v-effect help you? e.g. v-effect="doSomething(myProp)" will run doSomething whenever myProp changes.

[nooooooom]

Yes, it needs a PR to support.

[nfplee]

This is a breaking issue for me aswell. I have multiple components which uses the watch feature. I know the recommendation is to use the full framework if a feature is not supported but my application is more suited to petite-vue than vue since it uses server-side rendering for the initial response.

[tcardlab]

@nooooooom is likely correct that for a robust implimentation you may need to utilize the reactive core package: @vue/reactivity

Anthony Fu (antfu) did a write up on just that a while back.
source: https://antfu.me/posts/watch-with-reactivity

function traverse(value, seen = new Set()) {
  if (!isObject(value) || seen.has(value))
    return value

  seen.add(value) // prevent circular reference 
  if (isArray(value)) {
    for (let i = 0; i < value.length; i++)
      traverse(value[i], seen)
  }
  else {
    for (const key of Object.keys(value))
      traverse(value[key], seen)
  }
  return value
}

const watch = (source, fn, { deep, lazy = true }) => {
  let getter = isRef(source)
    ? () => source.value
    : isReactive(source) 
      ? () => source
      : source
    
  if (deep)
    getter = () => traverse(getter())
    
  const runner = effect(getter, {
    lazy,
    scheduler: fn
  }

  return () => stop(runner)
}

This simply provides base functionality. the forms of watch() that most vue users are accustomed to is more integrated into the render lifecycle via component/effect scopes, flush timing, render type checks, etc.

• core implementation ( doWatch: ~50 lines for func overloading, ~30 lines defining "job", ~50 lines on scheduling and running)
• v2 compat implementation (createWatcher: linking just because...)

Wrapped forms of this primitive are then exported for typical use.

He has already done the work of packaging it here:
https://www.npmjs.com/package/@vue-reactivity/watch

[nooooooom]

This looks cool and that's exactly what I was trying to express! We need to understand the reactive mechanism inside petite-vue to develop a solution.

[604587986]

petite-vue-pro https://github.com/604587986/petite-vue-pro