Subscribe on changes!

$forceUpdate enhancement

avatar
Jul 11th 2023

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
avatar
Jul 12th 2023

You need to avoid using $forceUpdate. You can use watch or watchEffect to re-render based on data changes.

avatar
Jul 12th 2023

@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.

avatar
Jul 12th 2023

@SunnyCrypto You might need to use nextTick. I use some charting libraries that redraw charts based on data changes.

avatar
Jul 12th 2023

@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.

avatar
Jul 12th 2023

@SunnyCrypto Which Vanilla Lib are you using? I use Highcharts. Its data cannot be reflected directly, but I can still re-render it through Watch.