fix(reactivity): unwrap nested refs on the template

src/reactivity/unwrap.ts

@@ -0,0 +1,45 @@
+import { isRef } from './ref';
+import { proxy, isFunction, isObject, isArray } from '../utils';
+import { isReactive } from './reactive';
+
+export function unwrapRefProxy(value: any) {
+  if (isFunction(value)) {
+    return value;
+  }
+
+  if (isRef(value)) {
+    return value;
+  }
+
+  if (isArray(value)) {
+    return value;
+  }
+
+  if (isReactive(value)) {
+    return value;
+  }
+
+  if (!isObject(value)) {
+    return value;
+  }
+
+  const obj: any = {};
+
+  // copy symbols over
+  Object.getOwnPropertySymbols(value).forEach((s) => (obj[s] = (value as any)[s]));
+
+  for (const k of Object.keys(value)) {
+    const r = value[k];
+    // if is a ref, create a proxy to retrieve the value,
+    if (isRef(r)) {
+      const set = (v: any) => (r.value = v);
+      const get = () => r.value;
+
+      proxy(obj, k, { get, set });
+    } else {
+      obj[k] = unwrapRefProxy(r);
+    }
+  }
+
+  return obj;
+}

src/setup.ts

@@ -6,6 +6,7 @@ import { resolveSlots, createSlotProxy } from './helper';
 import { hasOwn, isPlainObject, assert, proxy, warn, isFunction } from './utils';
 import { ref } from './apis/state';
 import vmStateManager from './vmStateManager';
+import { unwrapRefProxy } from './reactivity/unwrap';
 
 function asVmProperty(vm: ComponentInstance, propName: string, propValue: Ref<unknown>) {
   const props = vm.$options.props;
@@ -194,11 +195,11 @@ export function mixin(Vue: VueConstructor) {
             bindingValue = ref(bindingValue);
           } else {
             // bind function to the vm, this will make `this` = vm
-            if (isFunction(bindingValue)){
+            if (isFunction(bindingValue)) {
               bindingValue = bindingValue.bind(vm);
             }
             // a non-reactive should not don't get reactivity
-            bindingValue = ref(markRaw(bindingValue));
+            bindingValue = ref(markRaw(unwrapRefProxy(bindingValue)));
           }
         }
         asVmProperty(vm, name, bindingValue);

test/setup.spec.js

@@ -1,5 +1,5 @@
 const Vue = require('vue/dist/vue.common.js');
-const { ref, computed, createElement: h, provide, inject } = require('../src');
+const { ref, computed, createElement: h, provide, inject, reactive } = require('../src');
 
 describe('setup', () => {
   beforeEach(() => {
@@ -51,7 +51,7 @@ describe('setup', () => {
     expect(vm.b).toBe(1);
   });
 
-  it('should work with `methods` and `data` options', done => {
+  it('should work with `methods` and `data` options', (done) => {
     let calls = 0;
     const vm = new Vue({
       template: `<div>{{a}}{{b}}{{c}}</div>`,
@@ -215,7 +215,7 @@ describe('setup', () => {
     expect(vm.$refs.test.b).toBe(1);
   });
 
-  it('props should not be reactive', done => {
+  it('props should not be reactive', (done) => {
     let calls = 0;
     const vm = new Vue({
       template: `<child :msg="msg"></child>`,
@@ -256,7 +256,7 @@ describe('setup', () => {
     }).$mount();
   });
 
-  it('should not make returned non-reactive object reactive', done => {
+  it('should not make returned non-reactive object reactive', (done) => {
     const vm = new Vue({
       setup() {
         return {
@@ -285,8 +285,8 @@ describe('setup', () => {
   });
 
   it("should put a unenumerable '__ob__' for non-reactive object", () => {
-    const clone = obj => JSON.parse(JSON.stringify(obj));
-    const componentSetup = jest.fn(props => {
+    const clone = (obj) => JSON.parse(JSON.stringify(obj));
+    const componentSetup = jest.fn((props) => {
       const internalOptions = clone(props.options);
       return { internalOptions };
     });
@@ -329,7 +329,7 @@ describe('setup', () => {
           name: 'child',
           props: ['msg'],
           setup() {
-            return props => {
+            return (props) => {
               p = props;
               return null;
             };
@@ -340,7 +340,7 @@ describe('setup', () => {
     expect(p).toBe(undefined);
   });
 
-  it('inline render function should work', done => {
+  it('inline render function should work', (done) => {
     // let createElement;
     const vm = new Vue({
       props: ['msg'],
@@ -382,45 +382,141 @@ describe('setup', () => {
       .then(done);
   });
 
+  it('should unwrap on the template', () => {
+    const vm = new Vue({
+      setup() {
+        const r = ref('r');
+        const nested = {
+          a: ref('a'),
+          aa: {
+            b: ref('aa'),
+            bb: {
+              cc: ref('aa'),
+              c: 'aa',
+            },
+          },
+
+          aaa: reactive({
+            b: ref('aaa'),
+            bb: {
+              c: ref('aaa'),
+              cc: 'aaa',
+            },
+          }),
+
+          aaaa: {
+            b: [1],
+            bb: ref([1]),
+            bbb: reactive({
+              c: [1],
+              cc: ref([1]),
+            }),
+            bbbb: [ref(1)],
+          },
+        };
+
+        const refList = ref([ref('1'), ref('2'), ref('3')]);
+        const list = [ref('a'), ref('b')];
+
+        return {
+          r,
+          nested,
+          refList,
+          list,
+        };
+      },
+      template: `<div>
+        <p id="r">{{r}}</p>
+        <p id="nested">{{nested.a}}</p>
+        <p id="list">{{list}}</p>
+        <p id="refList">{{refList}}</p>
+
+        <p id="nested_aa_b">{{ nested.aa.b }}</p>
+        <p id="nested_aa_bb_c">{{ nested.aa.bb.c }}</p>
+        <p id="nested_aa_bb_cc">{{ nested.aa.bb.cc }}</p>
+
+        <p id="nested_aaa_b">{{ nested.aaa.b }}</p>
+        <p id="nested_aaa_bb_c">{{ nested.aaa.bb.c }}</p>
+        <p id="nested_aaa_bb_cc">{{ nested.aaa.bb.cc }}</p>
+
+        <p id="nested_aaaa_b">{{ nested.aaaa.b }}</p>
+        <p id="nested_aaaa_bb_c">{{ nested.aaaa.bb }}</p>
+        <p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.c }}</p>
+        <p id="nested_aaaa_bbb_cc">{{ nested.aaaa.bbb.cc }}</p>
+        <p id="nested_aaaa_bbbb">{{ nested.aaaa.bbbb }}</p>
+      </div>`,
+    }).$mount();
+
+    expect(vm.$el.querySelector('#r').textContent).toBe('r');
+    expect(vm.$el.querySelector('#nested').textContent).toBe('a');
+
+    // shouldn't unwrap arrays
+    expect(JSON.parse(vm.$el.querySelector('#list').textContent)).toMatchObject([
+      { value: 'a' },
+      { value: 'b' },
+    ]);
+    expect(JSON.parse(vm.$el.querySelector('#refList').textContent)).toMatchObject([
+      { value: '1' },
+      { value: '2' },
+      { value: '3' },
+    ]);
+
+    expect(vm.$el.querySelector('#nested_aa_b').textContent).toBe('aa');
+    expect(vm.$el.querySelector('#nested_aa_bb_c').textContent).toBe('aa');
+    expect(vm.$el.querySelector('#nested_aa_bb_cc').textContent).toBe('aa');
+
+    expect(vm.$el.querySelector('#nested_aaa_b').textContent).toBe('aaa');
+    expect(vm.$el.querySelector('#nested_aaa_bb_c').textContent).toBe('aaa');
+    expect(vm.$el.querySelector('#nested_aaa_bb_cc').textContent).toBe('aaa');
+
+    expect(JSON.parse(vm.$el.querySelector('#nested_aaaa_b').textContent)).toMatchObject([1]);
+    expect(JSON.parse(vm.$el.querySelector('#nested_aaaa_bb_c').textContent)).toMatchObject([1]);
+    expect(JSON.parse(vm.$el.querySelector('#nested_aaaa_bbb_cc').textContent)).toMatchObject([1]);
+    expect(JSON.parse(vm.$el.querySelector('#nested_aaaa_bbb_cc').textContent)).toMatchObject([1]);
+    expect(JSON.parse(vm.$el.querySelector('#nested_aaaa_bbbb').textContent)).toMatchObject([
+      { value: 1 },
+    ]);
+  });
+
   describe('Methods', () => {
-    it('binds methods when calling with parenthesis', async ()=>{
+    it('binds methods when calling with parenthesis', async () => {
       let context = null;
-      const contextFunction = jest.fn(function (){
-        context = this
+      const contextFunction = jest.fn(function () {
+        context = this;
       });
 
       const vm = new Vue({
         template: '<div><button @click="contextFunction()"/></div>',
         setup() {
           return {
-            contextFunction
-          }
-        }
+            contextFunction,
+          };
+        },
       }).$mount();
-  
+
       await vm.$el.querySelector('button').click();
       expect(contextFunction).toBeCalled();
       expect(context).toBe(vm);
     });
 
     it('binds methods when calling without parenthesis', async () => {
       let context = null;
-      const contextFunction = jest.fn(function (){
-        context = this
+      const contextFunction = jest.fn(function () {
+        context = this;
       });
 
       const vm = new Vue({
         template: '<div><button @click="contextFunction"/></div>',
         setup() {
           return {
-            contextFunction
-          }
-        }
+            contextFunction,
+          };
+        },
       }).$mount();
-  
+
       await vm.$el.querySelector('button').click();
       expect(contextFunction).toBeCalled();
       expect(context).toBe(vm);
     });
-  })
+  });
 });