@vue-reactivity/watch

<p align='center'> <img src='https://github.com/vue-reactivity/art/blob/master/svg/package-watch.svg?raw=true' height='250'> </p>

Usage no npm install needed!

<script type="module">
  import vueReactivityWatch from 'https://cdn.skypack.dev/@vue-reactivity/watch';
</script>

README

The (missing) watch for @vue/reactivity. Works without Vue.

npm npm bundle size

want to now how it works or write one on your own? Check out this blog post

Install

npm i @vue-reactivity/watch

Usage

Note: since there is no Vue instance to be bond, watch will NOT be auto disposed. You need to always explicitly call the returning function to stop it. Or you can try @vue-reactivity/scope which will auto collect the effects for you.

Just like what you do in Vue.

import { ref, reactive, computed } from '@vue/reactivity'
import { watch, watchEffect } from '@vue-reactivity/watch'

const count = ref(1)

const stopWatch = watch(
  count,
  (newValue) => {
    console.log(`Count: ${newValue}`)
  }
)

count.value += 1
// Count: 2

stopWatch()

License

MIT