Skip to content

Reactivity VS object with non-writable non-configurable property #3024

Open
@Liwoj

Description

@Liwoj

Version

3.0.5

Reproduction link

https://codesandbox.io/s/vue-3-proxy-over-object-with-non-writable-non-configurable-property-56z7n?file=/src/components/HelloWorld.vue

Steps to reproduce

Create an object with non-writable, non-configurable property and wrap it with reactive() proxy

setup() {
    const inner = { a: 1, b: 2 };
    let outer = {};
    Object.defineProperty(outer, "prop", {
      value: inner,
      writable: false,
      configurable: false,
    });

    outer = reactive(outer); // coment this line to fix the issue

    return {
      outer,
    };
  },

What is expected?

Proxy returned should conform to the ECMA specification - Invariants of the Essential Internal Methods

Specifically the one for Get method:

If P was previously observed as a non-configurable, non-writable own data property of the target with value v, then [[Get]] must return the SameValue.

So the proxy returned by reactive should not make object stored in prop property reactive proxy or change it's value in any other way...

What is actually happening?

Object stored in prop property is converted into reactive proxy and browsers throw an error when accessed from template:

Firefox: TypeError: proxy must report the same value for the non-writable, non-configurable property '"prop"'

Chrome: TypeError: 'get' on proxy: property 'prop' is a read-only and non-configurable data property on the proxy target but the proxy did not return its actual value (expected '#<Object>' but got '[object Object]')

Metadata

Metadata

Assignees

No one assigned

    Labels

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions