$forceUpdate enhancement
What problem does this feature solve?
Here is an example of executing the $forceUpdate
in a component, the children of this component won't be re-rendered.
https://codesandbox.io/p/sandbox/kind-hermann-ykxrhn
The$forceUpdate
seems only updates the current node, sometimes you may want to re-render all the children nodes without any tricky.
<!-- this is tricky-->
<Child :key="Math.random()" />
What does the proposed API look like?
should the $forceUpdate
work as React that re-renders the current node and all its children nodes?
or can we add an updateStrategy
option to the $forceUpdate
method for flexibility? such as supporting the following scenarios
- only update the current node (current behavior)
- update the current node and all its children nodes, including those nodes whose key and props remain unchanged
- except for the nodes whose key and props has not been changed, update the current node and all its children nodes
You need to avoid using $forceUpdate
. You can use watch
or watchEffect
to re-render based on data changes.
@Shyam-Chen if you want to build a combination of lib + components, the lib should be agnostic of frameworks. the components are built on top of the lib, and they can be either Vue or React components, even components from other frameworks.
some states are handled in lib, they are not reactive, and the states are updated manually.
in this case, the $forceUpdate
is useful for triggering the rendering when a state is manually updated.
@SunnyCrypto You might need to use nextTick
. I use some charting libraries that redraw charts based on data changes.
@Shyam-Chen please note the data or state is not reactive. the flow is doing an action via a lib method, then passing the state to a component and re-render.