Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

Identity checks with ref values in Vue3 not working as expected

This official Vue.js documentation claims that the ref() API in Vue 3 uses getters and setters.

In Vue 3, Proxies are used for reactive objects and getter / setters are used for refs.

This would imply, according to my understanding, positive identity checks when comparing an object with the value of its reference. The following example seems to prove the contrary.

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

Is there a gap in my understanding? Is the abovementioned article out-of-date?

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>

>Solution :

ref creates deeply reactive object with value property:

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

This means that nested properties like objRef.value.foo.bar are reactive, and nested refs are unwrapped.

If this is not desirable then shallowRef should be used instead:

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

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading