vue组件值变化但不刷新强制组件刷新

vue强制组件刷新、组件值变化不刷新

在调用组件的时候，如果数据中只是某个属性变化（比如id）变化，在vue开发工具中看到变量值变化，但是组件上的数据就是不刷新

bug复现

引用组件

sNode数据结构

{
    "id": "gun2m2c4",
    "label": "子弹4",
    "type": "cBomb",
    "data": {
        "angle": 50,
        "mwr": {
            "checked": false,
            "band": 50,
            "dbi": 50
        },
        "slr": {
            "checked": false,
            "length": 50,
            "power": 50,
            "facula": 50,
            "size": 50
        },
        "irDetector": {
            "checked": false,
            "band": 50,
            "dbi": 50
        },
        "mwd": {
            "checked": false,
            "band": 50,
            "direction": 50,
            "angle": 50
        }
    }
}
           

当鼠标点击切换子弹过快时，会出现子组件不刷新的情况

解决

先看值有没有return出去！如果没有return，子组件也是不响应的，watchEffect甚至监听不到

我们将提供一个key属性，以便 Vue 知道特定的组件与特定的数据片段相关联。如果key保持不变，则不会更改组件，但是如果key发生更改，Vue 就会知道应该删除旧组件并创建新组件。

我们可以将key分配给子组件，想重新渲染组件时，更新该key即可。这应该是强制Vue重新渲染组件的最佳方法

具体一点

把子弹的id当做key给组件，当作为key的id发生变化时，Vue将知道它必须销毁组件并创建一个新组件。我们得到的是一个子组件，它将重新初始化自身并“重置”其状态。