https://github.com/vue-reactivity/watch
The missing `watch` for @vue/reactivity
https://github.com/vue-reactivity/watch
vue-reactivity vue3 watch
Last synced: 8 months ago
JSON representation
The missing `watch` for @vue/reactivity
- Host: GitHub
- URL: https://github.com/vue-reactivity/watch
- Owner: vue-reactivity
- License: mit
- Created: 2020-09-17T20:17:29.000Z (about 5 years ago)
- Default Branch: master
- Last Pushed: 2022-06-01T16:28:26.000Z (over 3 years ago)
- Last Synced: 2024-10-15T23:02:47.710Z (12 months ago)
- Topics: vue-reactivity, vue3, watch
- Language: TypeScript
- Homepage:
- Size: 141 KB
- Stars: 122
- Watchers: 7
- Forks: 10
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Funding: .github/FUNDING.yml
- License: LICENSE
Awesome Lists containing this project
README
The (missing) watch for @vue/reactivity. Works without Vue.
want to know 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](https://github.com/vue-reactivity/scope) which will auto collect the effects for you.
Just like what you do in Vue.
```ts
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