Vue2.7 和 Vue3 使用 toRefs 时表现不同。

[yanhao98]

Version

2.7.14

Reproduction link

codesandbox.io

Steps to reproduce

Vue 2.7.14 CodeSandbox

https://codesandbox.io/s/recursing-tree-kfpd6x?file=/src/App.vue

Vue 3 CodeSandbox

https://codesandbox.io/s/charming-paper-b4u9qy?file=/src/App.vue

相同的代码。

在Vue 2.7.14 渲染结果

aHook.loading: { "value": false }

在Vue 3 渲染结果

aHook.loading: true

<template>
  <div>
    <div>aHook.loading: {{ aHook.loading }}</div>
    <!-- vue 2.7.14： aHook.loading: { "value": false } -->
    <!-- vue 3： aHook.loading: true -->
    <div>loading：{{ loading }}</div>
    <button @click="clickBtn1">clickBtn1</button>
  </div>
</template>

<script>
import { defineComponent, reactive, toRefs } from 'vue';

export default defineComponent({
  setup() {
    function useAHook() {
      const state = reactive({
        loading: false,
      });
      return {
        ...toRefs(state),
        fn() {
          state.loading = true;
        },
      };
    }

    const aHook = useAHook();
    const { loading } = aHook;

    function clickBtn1() {
      aHook.fn();
    }

    return {
      aHook,
      loading,
      clickBtn1,
    };
  },
});
</script>

What is expected?

在Vue 2.7.14 渲染结果与 Vue 3 相同。 渲染内容为：aHook.loading: true

What is actually happening?

渲染内容为：aHook.loading: { "value": false }

[enpitsuLin]

It looks like the toString should unref the Ref<T> object

~~This maybe due to Vue 2's reactivity limitations.~~

Vue 3 has a replacer parameter in JSON.stringify that call in toDisplayString but here has not same thing