The 反应性API https://vuejs.org/api/reactivity-core.html可作为独立库(独立于vue
包)可以在 Vue 上下文之外使用。
@vue/reactivity https://www.npmjs.com/package/@vue/reactivity包括reactive() https://vuejs.org/api/reactivity-core.html#reactive/ref() https://vuejs.org/api/reactivity-core.html#ref. And @vue-reactivity/watch https://www.npmjs.com/package/@vue-reactivity/watch包括watch() https://vuejs.org/api/reactivity-core.html#watch/watchEffect() https://vuejs.org/api/reactivity-core.html#watcheffect.
例如,您可以使用watchEffect
(or watch
) 记录新值globalState.counter
并将其显示在页面上的元素中:
// main.js
import { watchEffect } from '@vue-reactivity/watch'
import globalState from './globalState'
watchEffect(() => {
console.log('counter', globalState.counter)
document.querySelector('#count').innerHTML = globalState.counter
})
// globalState.js
import { reactive } from '@vue/reactivity'
const globalState = reactive({
counter: 0
})
export default globalState
demo 1 https://stackblitz.com/edit/vue-reactivity-outside-apps?file=main.js
在 React 应用程序中,您可以使用watch
记录新值globalState.counter
然后调用组件的setState()
重新渲染组件:
import { useState, useEffect } from 'react'
import { watch } from '@vue-reactivity/watch'
import globalState from './globalState'
import GlobalCounterButton from './GlobalCounterButton'
function App() {
const [count, setCount] = useState(0)
useEffect(() => {
const unwatch = watch(
() => globalState.counter,
(newValue, oldValue) => {
if (newValue !== oldValue) {
console.log('counter', newValue)
setCount(newValue)
}
}
)
return () => unwatch()
})
return (
<div>
<GlobalCounterButton />
<h2>count is: {count}</h2>
</div>
)
}
export default App
demo 2 https://stackblitz.com/edit/vue-reactivity-in-react-app-wddxb7?file=src%2FApp.jsx