This hook version allows the effect to be set up when the component first renders, then automatically stopped
when the component unmounts.
You may return a cleanup function from the given function to clean up side effects before the given function re-runs.
Note that this syntax follows that of useEffect from React, and is not the same as watchEffect from Vue.
Registers the given function to track reactive updates.
The given function will be run once immediately. Every time any reactive
property that's accessed within it gets updated, the function will run again.
Example
// Inside a function component: constcount = useRef(0) useEffect(() => { console.log(count.value) return () =>console.log('cleanup') }) count.value++
Parameters
fn: (() => void | CleanupFn)
The function that will track reactive updates. The return value from this function will be used as a cleanup function.
The hook version of
effect
from@vue/reactivity
.This hook version allows the effect to be set up when the component first renders, then automatically stopped when the component unmounts.
You may return a cleanup function from the given function to clean up side effects before the given function re-runs. Note that this syntax follows that of
useEffect
from React, and is not the same aswatchEffect
from Vue.Registers the given function to track reactive updates.
The given function will be run once immediately. Every time any reactive property that's accessed within it gets updated, the function will run again.
Example