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

reproduction missing, also don't use let

reproduction missing, also don't use let

so, how reproduction vue setup with jsfiddle

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

<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

You are misunderstanding how ref: works:

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

@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
}

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

@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
}

@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.

@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
}

@zhangenming yes, see test case in the PR.