readonly(["a", "b", "c"]).includes() tracks dependencies even though array is nonreactive

[lixiaofa]

Version

3.0.2

Reproduction link

https://codesandbox.io/s/vigorous-field-e0xxe?file=/src/App.vue

Steps to reproduce

readonly(["a", "b", "c"]) Collected by dependency

What is expected?

["a", "b", "c"] Should not be collected by dependency

What is actually happening?

["a", "b", "c"] Collected by dependency

[LinusBorg]

You misunderstand what readonly does. This is expected behaviour. readonly still allows for values to be collected as dependencies - it only keep you from mutating the source objects through the procxy returned by readonly.

Maybe you are looking for markRaw() or one of the shallow*() APIs.

Edit: my analysis here was wrong, see below (#2493 (comment))

[lixiaofa]

I'd like to ask why this design is so designed that indexes can't be collected by dependency, but by using lastIndexOf, indexof and includes. Shouldn't readonly behave consistently

[LinusBorg]

Please be more specific and provide an example.

[lixiaofa]

setup() {
const readonlyState = readonly(["a", "b", "c"]);
effect(() => {
debugger;
readonlyState.includes("a");
});
},
so
readonly(["a", "b", "c"]) Collected by dependency

if
setup() {
const readonlyState = readonly(["a", "b", "c"]);
effect(() => {
debugger;
readonlyState[0]
});
},
readonly(["a", "b", "c"]) Should not be collected by dependency

Shouldn't readonly behave consistently

[LinusBorg]

Ah, now I get what you mean. I failed at reproducing it properly first with the snippet your provided.

Let's look into it, we might have an issue here.

[lixiaofa]

You may have misunderstood the meaning

In the case of readonly(),

Why? readonlyState.includes ("a") to collect dependencies, readonlystate [0] will not collect dependencies
Not consistent behavior

[lixiaofa]

OK, thank you

[LinusBorg]

So thanks for being adamant here, I was wrong.

readonly on a plain value should of course not track. I usually use it on reactive values only and didn't think about it enough.

So the problem seems to be here:

https://github.com/vuejs/vue-next/blob/0e5a3c47a7398dfd0107fccf9b615772dd01aa74/packages/reactivity/src/baseHandlers.ts#L85-L88

We should check for isReadonly here

[LinusBorg]

Thanks for reporting, tracked it down and sent a PR.

Apologies for my initial stubborness.

[lixiaofa]

Thank you for answering my questions