Vue3 中引用值的身份检查未按预期工作

Question

这个官方 Vue.js 文档声称 Vue 3 中的

ref()

API 使用 getter 和 setter。

在 Vue 3 中，代理用于响应式对象，getter / setter 用于引用。

根据我的理解，这意味着在将对象与其引用的

value

进行比较时进行积极的身份检查。下面的例子似乎证明了相反的情况。

我的理解有差距吗？上述文章已经过时了吗？

const obj = {};
const objRef = Vue.ref(obj);

Vue.createApp({
setup() {
    return {
        answer: obj === objRef.value,
    };
}
}).mount('#app');

<script src="https://unpkg.com/vue@3"></script>

<div id="app">
      <code>obj === objRef.value</code> evaluates to <span>{{ answer }}</span>
</div>

Answer 1

ref

使用

value

属性创建深度反应对象：

const objRef = ref(obj);
console.log(obj !== objRef.value); // true
console.log(obj === toRaw(objRef.value)); // true

这意味着像

objRef.value.foo.bar

这样的嵌套属性是反应性的，并且嵌套引用是展开。

如果这不合需要，则应使用

shallowRef

来代替：

const objRef = shallowRef(obj);
console.log(obj === objRef.value); // true