fix(tree): 解决 tree 组件指定 keys 属性后，next 版本可能导致 dom 无限刷新的问题

fix Tencent#445

src/tree/td-tree.tsx

@@ -106,6 +106,15 @@ export default mixins(getConfigReceiverMixins<TypeTreeInstance, TreeConfig>('tre
     },
   },
   watch: {
+    // tdesign-vue-next 编译的代码导致了 dom 频繁刷新
+    // 怀疑是在 render 替换了 object 类型的属性导致
+    // 因此变更属性替换能力为 watch 形式
+    // @see https://github.com/Tencent/tdesign-vue-next/issues/445
+    keys(keys) {
+      this.store.setConfig({
+        keys,
+      });
+    },
     data(list) {
       this.rebuild(list);
     },
@@ -181,7 +190,6 @@ export default mixins(getConfigReceiverMixins<TypeTreeInstance, TreeConfig>('tre
       if (!store) return;
       // 统一更新选项，然后在 store 统一识别属性更新
       const storeProps = pick(this, [
-        'keys',
         'expandAll',
         'expandLevel',
         'expandMutex',
@@ -221,7 +229,7 @@ export default mixins(getConfigReceiverMixins<TypeTreeInstance, TreeConfig>('tre
     build() {
       let list = this.data;
       const {
-        actived, value, valueMode, filter,
+        actived, value, valueMode, filter, keys,
       } = this;
 
       const store = new TreeStore({
@@ -238,6 +246,9 @@ export default mixins(getConfigReceiverMixins<TypeTreeInstance, TreeConfig>('tre
       // 初始化数据
       this.store = store;
       this.updateStoreConfig();
+      this.store.setConfig({
+        keys,
+      });
 
       if (!Array.isArray(list)) {
         list = [];

test/unit/tree/keys.test.js

@@ -0,0 +1,53 @@
+import { mount } from '@vue/test-utils';
+import Tree from '@/src/tree/index.ts';
+
+describe('Tree:keys', () => {
+  jest.useRealTimers();
+  describe(':props.keys', () => {
+    it('可指定树结构监听分配的属性', async () => {
+      const data = [
+        {
+          id: 't1',
+          name: 'node.t1',
+          subnodes: [
+            {
+              id: 't1.1',
+              name: 'node.t1.1',
+            },
+            {
+              id: 't1.2',
+              name: 'node.t1.2',
+            },
+          ],
+        },
+      ];
+
+      const keys = {
+        value: 'id',
+        label: 'name',
+        children: 'subnodes',
+      };
+
+      const wrapper = mount({
+        data() {
+          return {};
+        },
+        render() {
+          return <Tree keys={keys} data={data} expandAll></Tree>;
+        },
+      });
+
+      const t1 = wrapper.find('[data-value="t1"]');
+      const t1d1 = wrapper.find('[data-value="t1.1"]');
+      const t1d2 = wrapper.find('[data-value="t1.2"]');
+
+      expect(t1.exists()).toBe(true);
+      expect(t1d1.exists()).toBe(true);
+      expect(t1d2.exists()).toBe(true);
+
+      expect(t1.text()).toBe('node.t1');
+      expect(t1d1.text()).toBe('node.t1.1');
+      expect(t1d2.text()).toBe('node.t1.2');
+    });
+  });
+});