experimental "ref sugar": local variables sharing a name with a top-level ref are overwritten

[zhangenming]

Version

3.0.7

Reproduction link

https://codesandbox.io/s/eloquent-antonelli-xr3fb?file=/src/App.vue

Steps to reproduce

<template>
  <button @click="test">...</button>
</template>

<script setup>
ref: x = 1
function test() {
  const x = { value: 2 }
  console.log(x) //will  show 1, should show 2
}
</script>

What is expected?

show 2

What is actually happening?

show 1

[LinusBorg]

reproduction missing, also don't use let

[zhangenming]

reproduction missing, also don't use let

so, how reproduction vue setup with jsfiddle

[posva]

Read https://new-issue.vuejs.org/?repo=vuejs/vue-next#why-repro. There are links too

[zhangenming]

<template>
  <button @click="test">...</button>
</template>

<script setup>
ref: x = 1
function test() {
  const x = { value: 2 }
  console.log(x) //will  show 1, should show 2
}
</script>

that is all
quite clearly, not necessary at all reproduction ...
scope mistake, compiler has a bug

[LinusBorg]

You are misunderstanding how ref: works:

ref: x = 1
function test() {
  x = 2
  console.log(x) //will  show 2
}

[jacekkarczmarczyk]

@LinusBorg you're using the "outside" x, OP is using another var defined inside the function

const x = 1
function test() {
  const x = 2
  console.log(x)  // 2
}

but

ref: x = 1
function test() {
  const x = 2
  console.log(x)  // 1
}

[zhangenming]

You are misunderstanding how ref: works:

ref: x = 1
function test() {
  x = 2
  console.log(x) //will  show 2
}

你应该没明白我的意思
我是说
我用ref申请了一个变量x
然后在函数内也申请了一个变量, 名字叫x, 恰巧和外面的ref相同了
那么 编译器就会把函数内部的x 当成ref的x
这意味着 我x是全局的了 内部不能有相同的名字
难道这是正常的?
这应该是一个bug
You may not understand what I mean
I mean
I used ref to apply for a variable x
Then a variable is also applied for in the function, the name is x, which happens to be the same as the ref outside
Then the compiler will treat the x inside the function as the x of ref
This means that ref x is global and cannot have the same name inside a function
Is this normal?
This should be a bug

简单说
如果函数作用域内一个变量名和外部的一个ref变量名相同, 编译器会把他当做外部的ref
in short
If a function scope variable has the same name as an outside ref variable, the compiler will treat it as outside ref

[zhangenming]

@LinusBorg you're using the "outside" x, OP is using another var defined inside the function

const x = 1
function test() {
  const x = 2
  console.log(x)  // 2
}

but

ref: x = 1
function test() {
  const x = 2
  console.log(x)  // 1
}

Not exactly correct

ref: x = 1
function test() {
  const x = 2
  console.log(x)  // not show 1, will show undefiend, because the compiler will convert to console.log(x.value)
}

What's worse

ref: Variables_with_the_same_name_in_two_scopes = 1
function test() {
  let Variables_with_the_same_name_in_two_scopes 
  console.log(Variables_with_the_same_name_in_two_scopes)  // will ERROR, console.log(Variables_with_the_same_name_in_two_scopes.value) ,  Cannot read property 'value' of undefined
}

[LinusBorg]

@jacekkarczmarczyk Thanks. totally missed the point of the example.

Looks like a bug in the compiler for that experimental syntax, indeed.

@zhangenming Sorry for misunderstanding.

[zhangenming]

@edison1105
Does your PR allow for the opposite

ref: x
function f(){
  let $x
  console.log($x) // It compiles to x, which should be $x
}

[edison1105]

@zhangenming yes, see test case in the PR.