vue3 keep-alive模式下，@antv/x6 元素中引用自定义组件，通过列表到编辑页面的时候，如果同时打开多个编辑页面，则会发生数据错乱的问题的简单处理。

1、KeepAlive | Vue.js

官网说明：

2、在实际的项目中，我们在@antv/x6的元素节点中使用了自定义的组件，出现了一种问题：

当打开一个编辑页面1时，一切正常，但再次打开另一个编辑页面2的时候，就出现页面1与页面2的数据一致的情况，如果再次打开第三个编辑面面3，那么1，2，3的数据将会全都一样，而且全是页面3的数据。

发现这种情况，是用了keep-alive模式导致，那么常规的处理方法：

1）watch:

 watch(
    () => route.params?.id,
    (newId, oldId) => {
      if (newId !== oldId && newId != undefined) {
        getData(newId);
      }
    },
    { immediate: true }, //这里是一开始就执行一次
  );

这个方法，测试下来，只要打开几个页面，就会执行几次。

2）上面的生命周期中，用到了onActivated与onDeactivated生命周期钩子，如果将watch去掉，onMounted去掉，直接用onActivated去执行，是默认只会执行一次，如果将业务数据都放到这个里面去执行，数据方面一切正常。一般的项目，这样就处理成功了。

3）现在碰到的问题是，现在用了自定义的组件去处理节点元素，那么也就是说这个组件的子组件也有生命周期，这里测试了好多次，created(), mounted()，activated()，deactivated()，

一开始测试的时候，activated也是可以执行，有时候console.log不输出，说明不执行，不知道是不是个人环境问题，父组件中，使用了onActivated只会调用一次，但是到了元素的子组件中，因为是要创建多个元素节点，就会打开几个去执行几次，这个问题，尝试了好几次，发现没法控制，想通过id去检测，发现每次的都不会保存下来，导致没法判断。如果放到activated中，也会多次执行，测试这种方法不可行。

3、最后找了一个折中的方法来处理：

1）去掉keep-alive，这样可能体验会差一些，切换tab，数据丢失。但这是一种处理方法，至少数据是正常的。

2）还是用keep-alive，将有些页面放到exclude，下面是官网的说明

3）待测试......