Version

3.2.33

Reproduction link

sfc.vuejs.org/

Steps to reproduce

1. npm init vite@latest : create a new project (or npm init vue@latest : select vue ts)
2. copy the playground App.vue to the project's App.vue
3. run it !

App.vue

What is expected?

the result is not the same with playground . I think the result of playground is OK, but the real project is not the same with playground.

What is actually happening?

I have changed the reactive value to 1000 , but the template's result is not 1000 in the real project created by the command of quick start of document of vue3.

no

I have do it followed your sugestion, it did not work yet.

I have changed it to

<scritpt setup lang="ts">

, so I think no need to import defineomponent ,

1= npm init vite@latest : or npm init vue@latest : select vue ts) 2= copy the playground App.vue to the project's App.vue 3= run it , you can reproduce it

the realworld envirenment of vue is working no correct ...

Add Example

This is probably a bug.

nomal

<template>
  <div>obj:{{ obj }}</div>
  <div>reactiveObj:{{ reactiveObj }}</div>
  <div>reactiveObj1:{{ reactiveObj1 }}</div>
  <div><button @click="addRef1">修改reactive1</button></div>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from "vue";

export default {
    setup() {
      let obj = {
        value: 0
      };
      let obj1 = {
        value: 0
      };
      let reactiveObj = reactive(obj);
      const reactiveObj1 = reactive(obj);

      console.log("-------------------------------------");
      console.log(obj === reactiveObj); // false
      console.log(reactiveObj === reactiveObj1); // true

      console.log(obj);
      console.log(reactiveObj);

      function addRef1() {
        reactiveObj1.value += 1;
        console.log("1111:" + reactiveObj1.value);
        reactiveObj = { value: 1000 };
        console.log(reactiveObj)
      }

      return {
        obj,
        obj1,
        reactiveObj,
        reactiveObj1,
        addRef1
      }
    }
}
</script>

setup

<template>
  <div>obj:{{ obj }}</div>
  <div>reactiveObj:{{ reactiveObj }}</div>
  <div>reactiveObj1:{{ reactiveObj1 }}</div>
  <div><button @click="addRef1">修改reactive1</button></div>
</template>

<script setup lang="ts">
import { reactive, ref, toRefs } from "vue";
import { defineComponent } from "@vue/runtime-core";

let obj = { value: 0 };
let obj1 = { value: 0 };
let reactiveObj = reactive<{ value: number }>(obj);
const reactiveObj1 = reactive<{ value: number }>(obj);

console.log("-------------------------------------");
console.log(obj === reactiveObj); // false
console.log(reactiveObj === reactiveObj1); // true

console.log(obj);
console.log(reactiveObj);

function addRef1(): void {
  reactiveObj1.value += 1;
  console.log("1111:" + reactiveObj1.value);
  reactiveObj = { value: 1000 };
  console.log(reactiveObj)
}
</script>

Likely duplicate of https://github.com/vuejs/core/issues/5655

Please be clear when reporting a bug, it's quite hard to decipher.

Note you should do const reactiveObj = reactive(...), not let reactiveObj = ... and not reassign the object.

yes