fix: classic data & computed support

Akryum · Akryum · commit 7d5d35e1dca1 · 2020-03-15T17:17:47.000+01:00
diff --git a/packages/app-backend/src/index.js b/packages/app-backend/src/index.js
@@ -380,7 +380,6 @@ function getInternalInstanceChildren (instance) {
   if (instance.$children) {
     return instance.$children
   }
-  console.log(instance.subTree.children)
   if (Array.isArray(instance.subTree.children)) {
     return instance.subTree.children.filter(vnode => !!vnode.component).map(vnode => vnode.component)
   }
@@ -769,13 +768,18 @@ function processState (instance) {
   const getters =
     type.vuex &&
     type.vuex.getters
+  const computedDefs = type.computed
 
-  const data = instance._data || instance.renderContext || {}
+  const data = instance._data || {
+    ...instance.data,
+    ...instance.renderContext
+  } || {}
 
   return Object.keys(data)
     .filter(key => (
       !(props && key in props) &&
-      !(getters && key in getters)
+      !(getters && key in getters) &&
+      !(computedDefs && key in computedDefs)
     ))
     .map(key => ({
       key,
@@ -825,7 +829,7 @@ function processComputed (instance) {
       computedProp = {
         type,
         key,
-        value: instance[key]
+        value: instance.renderContext ? instance.renderContext[key] : instance[key]
       }
     } catch (e) {
       computedProp = {
diff --git a/packages/shell-dev-vue3/src/Child.vue b/packages/shell-dev-vue3/src/Child.vue
@@ -1,21 +1,36 @@
 <script>
-import { ref } from 'vue'
+import { ref, computed } from 'vue'
 
 export default {
   name: 'Child',
 
   setup () {
     const answer = ref(42)
 
+    const doubleAnswer = computed(() => answer.value * 2)
+
+    return {
+      answer,
+      doubleAnswer
+    }
+  },
+
+  data () {
     return {
-      answer
+      classicAnswer: 42
+    }
+  },
+
+  computed: {
+    classicDoubleAnswer () {
+      return this.classicAnswer * 2
     }
   }
 }
 </script>
 
 <template>
   <div>
-    Child: {{ answer }}
+    Child: {{ answer }} x2: {{ doubleAnswer }}
   </div>
 </template>
