fix: vue 数据不更新 (#1707)

Co-authored-by: xuying.xu <xuying.xu@alibaba-inc.com>
antvis · Jan 16, 2023 · 6f15e4a · 6f15e4a
1 parent 8660a81
commit 6f15e4a
Show file tree

Hide file tree

Showing 2 changed files with 13 additions and 9 deletions.
diff --git a/packages/vue/examples/vue3/src/App.vue b/packages/vue/examples/vue3/src/App.vue
@@ -33,6 +33,10 @@ export default {
       this.year = '2022';
       this.chartData = data2;
     }, 1000);
+    setTimeout(() => {
+      this.year = '2021';
+      this.chartData = data1;
+    }, 3000);
   },
   render() {
     const { year, chartData } = this;

diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
@@ -67,19 +67,19 @@ export default {
     getProps() {
       const { $props, $slots } = this;
       const props = toRaw($props);
-      props.children = toRawChildren($slots);
-      return props;
+      const canvasEl = this.$el;
+      const context = canvasEl.getContext('2d');
+      return {
+        ...props,
+        // context 内部创建，不能被覆盖
+        context,
+        children: toRawChildren($slots),
+      };
     },
   },
   mounted() {
-    const canvasEl = this.$el;
-    const context = canvasEl.getContext('2d');
     const props = this.getProps();
-    const canvas = new Canvas({
-      ...props,
-      // context 内部创建，不能被覆盖
-      context,
-    });
+    const canvas = new Canvas(props);
     canvas.render();
     this.canvas = canvas;
   },