Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/yyx990803/vue-hooks
Experimental React hooks implementation in Vue
https://github.com/yyx990803/vue-hooks
Last synced: about 2 months ago
JSON representation
Experimental React hooks implementation in Vue
- Host: GitHub
- URL: https://github.com/yyx990803/vue-hooks
- Owner: yyx990803
- Archived: true
- Created: 2018-10-27T04:58:21.000Z (almost 6 years ago)
- Default Branch: master
- Last Pushed: 2020-04-29T19:59:15.000Z (over 4 years ago)
- Last Synced: 2024-07-18T14:42:00.449Z (2 months ago)
- Language: JavaScript
- Size: 16.6 KB
- Stars: 1,593
- Watchers: 39
- Forks: 67
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# **!!! ARCHIVED !!!**
Vue now has its own hooks inspired API for composing logic: https://composition-api.vuejs.org/
This PoC has completed its purpose and will no longer be updated.
---
# vue-hooks
POC for using [React Hooks](https://reactjs.org/docs/hooks-intro.html) in Vue. Totally experimental, don't use this in production.
[Live Demo](https://codesandbox.io/s/jpqo566289)
### React-style Hooks
``` js
import Vue from "vue"
import { withHooks, useState, useEffect } from "vue-hooks"
// a custom hook...
function useWindowWidth() {
const [width, setWidth] = useState(window.innerWidth)
const handleResize = () => {
setWidth(window.innerWidth)
};
useEffect(() => {
window.addEventListener("resize", handleResize)
return () => {
window.removeEventListener("resize", handleResize)
}
}, [])
return width
}
const Foo = withHooks(h => {
// state
const [count, setCount] = useState(0)
// effect
useEffect(() => {
document.title = "count is " + count
})
// custom hook
const width = useWindowWidth()
return h("div", [
h("span", `count is: ${count}`),
h(
"button",
{
on: {
click: () => setCount(count + 1)
}
},
"+"
),
h("div", `window width is: ${width}`)
])
})
// just so you know this is Vue...
new Vue({
el: "#app",
render(h) {
return h("div", [h(Foo), h(Foo)])
}
})
```
### Vue-style Hooks
API that maps Vue's existing API.
``` js
import {
withHooks,
useData,
useComputed,
useWatch,
useMounted,
useUpdated,
useDestroyed
} from "vue-hooks"
const Foo = withHooks(h => {
const data = useData({
count: 0
})
const double = useComputed(() => data.count * 2)
useWatch(() => data.count, (val, prevVal) => {
console.log(`count is: ${val}`)
})
useMounted(() => {
console.log('mounted!')
})
useUpdated(() => {
console.log('updated!')
})
useDestroyed(() => {
console.log('destroyed!')
})
return h('div', [
h('div', `count is ${data.count}`),
h('div', `double count is ${double}`),
h('button', { on: { click: () => {
// still got that direct mutation!
data.count++
}}}, 'count++')
])
})
```
### Usage in Normal Vue Components
``` js
import { hooks, useData, useComputed } from 'vue-hooks'
Vue.use(hooks)
new Vue({
template: `
{{ data.count }} {{ double }}
`,
hooks() {
const data = useData({
count: 0
})
const double = useComputed(() => data.count * 2)
return {
data,
double
}
}
})
```