revert: #387 (#395)

* Revert "fix: unwrap refs returned by `data` (#387)"

This reverts commit 1f07075.

* docs: add limitation note for reactive apis in data()

Co-authored-by: Carlos Rodrigues <david-181@hotmail.com>

README.md

@@ -315,6 +315,21 @@ declare module '@vue/composition-api/dist/component/component' {
 }
 ```
 
+### :x: Reactive APIs in `data()`
+
+Passing `ref`, `reactive` or other reactive apis to `data()` would not work.
+
+```jsx
+export default {
+  data() {
+    return {
+      // will result { a: { value: 1 } } in template
+      a: ref(1) 
+    }
+  },
+};
+```
+
 ## SSR
 
 Even if there is no definitive Vue 3 API for SSR yet, this plugin implements the `onServerPrefetch` lifecycle hook that allows you to use the `serverPrefetch` hook found in the classic API.

src/setup.ts

@@ -154,22 +154,6 @@ export function mixin(Vue: VueConstructor) {
       }
     }
 
-    const { data } = $options
-    // wrapper the data option, so we can invoke setup before data get resolved
-    $options.data = function wrappedData() {
-      if (setup) {
-        initSetup(vm, vm.$props)
-      }
-      const dataValue =
-        typeof data === 'function'
-          ? (data as (
-              this: ComponentInstance,
-              x: ComponentInstance
-            ) => object).call(vm, vm)
-          : data || {}
-      return unwrapRefProxy(dataValue)
-    }
-
     if (!setup) {
       return
     }
@@ -182,6 +166,18 @@ export function mixin(Vue: VueConstructor) {
       }
       return
     }
+
+    const { data } = $options
+    // wrapper the data option, so we can invoke setup before data get resolved
+    $options.data = function wrappedData() {
+      initSetup(vm, vm.$props)
+      return typeof data === 'function'
+        ? (data as (
+            this: ComponentInstance,
+            x: ComponentInstance
+          ) => object).call(vm, vm)
+        : data || {}
+    }
   }
 
   function initSetup(vm: ComponentInstance, props: Record<any, any> = {}) {

test/setup.spec.js

@@ -84,19 +84,6 @@ describe('setup', () => {
     expect(vm.b).toBe(1)
   })
 
-  // #385
-  it('should unwrapRef on data', () => {
-    const vm = new Vue({
-      data() {
-        return {
-          a: ref(1),
-        }
-      },
-      setup() {},
-    }).$mount()
-    expect(vm.a).toBe(1)
-  })
-
   it('should work with `methods` and `data` options', (done) => {
     let calls = 0
     const vm = new Vue({
@@ -769,37 +756,4 @@ describe('setup', () => {
     const vm = new Vue(Constructor).$mount()
     expect(vm.$el.textContent).toBe('Composition-api')
   })
-
-  it('should keep data reactive', async () => {
-    const vm = new Vue({
-      template: `<div>
-        <button id="a" @click="a++">{{a}}</button>
-        <button id="b" @click="b++">{{b}}</button>
-      </div>`,
-      data() {
-        return {
-          a: 1,
-          b: ref(1),
-        }
-      },
-    }).$mount()
-
-    const a = vm.$el.querySelector('#a')
-    const b = vm.$el.querySelector('#b')
-
-    expect(a.textContent).toBe('1')
-    expect(b.textContent).toBe('1')
-
-    a.click()
-    await Vue.nextTick()
-
-    expect(a.textContent).toBe('2')
-    expect(b.textContent).toBe('1')
-
-    b.click()
-    await Vue.nextTick()
-
-    expect(a.textContent).toBe('2')
-    expect(b.textContent).toBe('2')
-  })
 })